# ============================================================================
# [LIVRE] HTML & CSS - GUIDE ULTRA-DÉTAILLÉ POUR DÉBUTANTS EN GÉNIE LOGICIEL
# ============================================================================
#
# [OBJECTIF] GUIDE COMPLET POUR MAÎTRISER HTML & CSS DE ZÉRO À EXPERT
#
# Ce guide est organisé en 5 parties progressives :
#
# PARTIE 1 : FONDAMENTAUX HTML (html_css_partie1.txt)
# - Chapitre 0 : Introduction à HTML & CSS
# - Chapitre 1 : Structure HTML de Base
# - Chapitre 2 : Balises de Texte et Sémantique
# - Chapitre 3 : Liens, Images et Médias
# - Chapitre 4 : Listes et Tableaux
#
# PARTIE 2 : FONDAMENTAUX CSS (html_css_partie2.txt)
# - Chapitre 5 : Introduction au CSS
# - Chapitre 6 : Sélecteurs CSS
# - Chapitre 7 : Box Model
# - Chapitre 8 : Couleurs, Typographie, Backgrounds
#
# PARTIE 3 : MISE EN PAGE (html_css_partie3.txt)
# - Chapitre 9  : Flexbox
# - Chapitre 10 : CSS Grid
# - Chapitre 11 : Positionnement
# - Chapitre 12 : Responsive Design & Media Queries
#
# PARTIE 4 : HTML AVANCÉ & FORMULAIRES (html_css_partie4.txt)
# - Chapitre 13 : Formulaires HTML Complets
# - Chapitre 14 : HTML Sémantique & Accessibilité
# - Chapitre 15 : Balises Multimédias Avancées
# - Chapitre 16 : Meta Tags & SEO
#
# PARTIE 5 : CSS AVANCÉ (html_css_partie5.txt)
# - Chapitre 17 : Transitions & Animations CSS
# - Chapitre 18 : Variables CSS (Custom Properties)
# - Chapitre 19 : Pseudo-classes & Pseudo-éléments
# - Chapitre 20 : Best Practices & Performances
#
# [TEMPS] TEMPS DE LECTURE TOTAL : ~20-25 heures
# [DOCS] PRÉREQUIS : Aucun (guide pour vrais débutants)
# ============================================================================

PHILOSOPHIE DE CE GUIDE :
  COMMENT ? -> Explications pas à pas avec code
  POURQUOI ? -> Raisons et contexte pour chaque concept
  QUAND ?   -> Cas d'usage concrets
  PRATIQUE  -> Exemples réels et exercices à la fin de chaque chapitre

Ce guide vise à être VOTRE SEULE RÉFÉRENCE HTML/CSS !

CONVENTIONS :
  [IDEE] Information importante
  [REFLEXION] Question / Réflexion
  [OK] Bonne pratique
  [X] Mauvaise pratique
  [ATTENTION] Attention / Avertissement
  [CLE] Point clé à retenir
  [COURS] Exercice pratique

OUTILS NÉCESSAIRES :
  Éditeur de code  : VS Code (recommandé)
  Navigateur       : Chrome ou Firefox (avec DevTools F12)
  Extension VS Code: Live Server (rechargement automatique)

RESSOURCES COMPLÉMENTAIRES :
  MDN Web Docs : https://developer.mozilla.org/fr/
  CSS-Tricks   : https://css-tricks.com/
  Can I Use    : https://caniuse.com/

-> COMMENCEZ PAR : html_css_partie1.txt

# ============================================================================
# [LIVRE] HTML & CSS - PARTIE 1 : FONDAMENTAUX HTML
# ============================================================================
#
# [OBJECTIF] CETTE PARTIE COUVRE :
# - Chapitre 0 : Introduction à HTML & CSS
# - Chapitre 1 : Structure HTML de Base
# - Chapitre 2 : Balises de Texte et Sémantique
# - Chapitre 3 : Liens, Images et Médias
# - Chapitre 4 : Listes et Tableaux
#
# [TEMPS] TEMPS : ~5-6 heures
# [DOCS] PRÉREQUIS : Aucun
# ============================================================================


# ============================================================================
# [GUIDE] CHAPITRE 0 : INTRODUCTION À HTML & CSS
# ============================================================================

[OBJECTIF] OBJECTIFS D'APPRENTISSAGE
  À la fin de ce chapitre, vous saurez :
  [OK] Ce qu'est HTML et ce qu'est CSS
  [OK] Comment les deux langages fonctionnent ensemble
  [OK] Configurer votre environnement de travail
  [OK] Créer et ouvrir votre premier fichier HTML


# ────────────────────────────────────────────────────────────────────────────
# [REFLEXION] QU'EST-CE QUE HTML ?
# ────────────────────────────────────────────────────────────────────────────

HTML = HyperText Markup Language
  -> Langage de BALISAGE (pas de programmation)
  -> Définit la STRUCTURE et le CONTENU d'une page web
  -> Créé par Tim Berners-Lee en 1991
  -> Version actuelle : HTML5 (2014)

ANALOGIE MAISON [ACCUEIL] :
  HTML  = La charpente et les murs (structure)
  CSS   = La peinture et la décoration (apparence)
  JS    = L'électricité et la plomberie (comportement)

EXEMPLE HTML SIMPLE :
  <!-- Ceci est un commentaire HTML (invisible dans le navigateur) -->
  <h1>Mon Titre</h1>
  <p>Mon paragraphe de texte.</p>
  <img src="photo.jpg" alt="Ma photo">

[IDEE] Une "balise" HTML ressemble à <nom> ... </nom>
   - Balise ouvrante : <p>
   - Contenu         : Mon texte
   - Balise fermante : </p>


# ────────────────────────────────────────────────────────────────────────────
# [DESIGN] QU'EST-CE QUE CSS ?
# ────────────────────────────────────────────────────────────────────────────

CSS = Cascading Style Sheets (Feuilles de Style en Cascade)
  -> Langage de STYLE
  -> Contrôle l'APPARENCE des éléments HTML
  -> Séparation du fond (HTML) et de la forme (CSS)

EXEMPLE CSS SIMPLE :
  h1 {
    color: blue;           /* Couleur du texte */
    font-size: 32px;       /* Taille de la police */
    text-align: center;    /* Centrer le texte */
  }

  p {
    color: #333333;        /* Gris foncé */
    line-height: 1.6;      /* Espacement entre les lignes */
    margin: 20px;          /* Espace autour du paragraphe */
  }

[IDEE] POURQUOI SÉPARER HTML ET CSS ?
  [OK] HTML = Ce que c'est (titre, paragraphe, image)
  [OK] CSS = À quoi ça ressemble (rouge, grand, centré)
  [OK] Changer tout le style en modifiant UN seul fichier CSS
  [OK] Code plus lisible et maintenable
  [OK] Partager le même CSS pour plusieurs pages HTML


# ────────────────────────────────────────────────────────────────────────────
# [OUTILS] CONFIGURATION DE L'ENVIRONNEMENT
# ────────────────────────────────────────────────────────────────────────────

ÉTAPE 1 : INSTALLER VS CODE
  -> Télécharger sur https://code.visualstudio.com/
  -> Gratuit, léger, populaire

ÉTAPE 2 : INSTALLER L'EXTENSION LIVE SERVER
  -> Dans VS Code : Ctrl+Shift+X
  -> Rechercher "Live Server"
  -> Installer (par Ritwick Dey)
  -> Permet rechargement automatique lors de modifications

ÉTAPE 3 : CRÉER UN DOSSIER DE PROJET
  -> Créer un dossier : mon-premier-site/
  -> Ouvrir dans VS Code : Fichier -> Ouvrir le dossier

ÉTAPE 4 : CRÉER VOTRE PREMIER FICHIER
  -> Nouveau fichier : index.html
  -> Astuce VS Code : Taper "!" puis Entrée -> Template automatique!

STRUCTURE MINIMALE D'UN PROJET :
  mon-premier-site/
  ├── index.html      <- Page principale (TOUJOURS nommer index.html)
  ├── style.css       <- Styles CSS
  ├── images/         <- Dossier pour les images
  └── pages/          <- Autres pages HTML (optionnel)


# ────────────────────────────────────────────────────────────────────────────
# [WEB] COMMENT FONCTIONNE UN NAVIGATEUR ?
# ────────────────────────────────────────────────────────────────────────────

1. Vous tapez une URL ou ouvrez un fichier HTML
2. Le navigateur LIT le fichier HTML
3. Il INTERPRÈTE les balises
4. Il TÉLÉCHARGE les ressources liées (CSS, images, fonts)
5. Il AFFICHE la page (rendu)

DEVTOOLS (Outils de développement) :
  -> Touche F12 dans le navigateur
  -> Onglet "Elements" : Voir et modifier le HTML
  -> Onglet "Console" : Voir les erreurs JavaScript
  -> Onglet "Styles"  : Voir et modifier le CSS en direct
  -> Très utile pour déboguer !

[IDEE] ASTUCE : Clic droit sur un élément -> "Inspecter"
   Pour voir exactement quel HTML/CSS correspond à ce que vous voyez


# ============================================================================
# [GUIDE] CHAPITRE 1 : STRUCTURE HTML DE BASE
# ============================================================================

[OBJECTIF] OBJECTIFS D'APPRENTISSAGE
  [OK] Comprendre la structure de tout document HTML5
  [OK] Connaître les balises obligatoires
  [OK] Savoir ce que fait chaque section
  [OK] Écrire votre première page HTML valide


# ────────────────────────────────────────────────────────────────────────────
# [FICHIER] STRUCTURE COMPLÈTE D'UN DOCUMENT HTML5
# ────────────────────────────────────────────────────────────────────────────

EXEMPLE COMPLET - index.html :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Description de ma page pour Google">
    <title>Ma première page web</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <h1>Bienvenue sur ma page !</h1>
    <p>Ceci est mon premier paragraphe.</p>

</body>
</html>


DÉCRYPTAGE LIGNE PAR LIGNE :

1. <!DOCTYPE html>
   ──────────────────
   QUOI : Déclaration du type de document
   POURQUOI : Dit au navigateur "c'est du HTML5"
   QUAND : TOUJOURS en première ligne, une seule fois
   [ATTENTION] PAS une balise HTML ! C'est une instruction.
   [OK] Obligatoire, même si sans elle la page s'affiche quand même

2. <html lang="fr">
   ──────────────────
   QUOI : Élément racine, contient TOUT le document
   POURQUOI : Nécessaire, tout HTML doit être dans <html>
   lang="fr" : Déclare la langue (important pour SEO et accessibilité)
   [OK] Toujours fermer avec </html> à la fin du fichier

3. <head> ... </head>
   ──────────────────
   QUOI : En-tête du document (INVISIBLE dans la page)
   POURQUOI : Contient les métadonnées (informations POUR le navigateur)
   CONTIENT : charset, viewport, title, CSS, etc.
   [ATTENTION] Rien dans <head> ne s'affiche directement à l'écran

4. <meta charset="UTF-8">
   ──────────────────────
   QUOI : Encodage des caractères
   POURQUOI : Permet d'afficher correctement é, à, ç, €, 中文, etc.
   UTF-8 : Encodage universel (supporte tous les caractères)
   [OK] TOUJOURS inclure, sinon les accents s'affichent mal (é -> Ã©)

5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
   ───────────────────────────────────────────────────────────────────────
   QUOI : Configuration de l'affichage mobile
   POURQUOI : Sans ça, mobile affiche la version desktop zoomée
   width=device-width : La largeur = largeur de l'écran
   initial-scale=1.0  : Pas de zoom au démarrage
   [OK] ESSENTIEL pour les sites responsive (compatibles mobile)

6. <title>Ma première page web</title>
   ────────────────────────────────────
   QUOI : Titre de l'onglet du navigateur
   POURQUOI : Affiché dans l'onglet, dans les favoris, sur Google
   [ATTENTION] DIFFÉRENT du <h1> qui lui s'affiche dans la page
   [OK] Important pour le SEO (référencement Google)

7. <link rel="stylesheet" href="style.css">
   ─────────────────────────────────────────
   QUOI : Liaison avec le fichier CSS externe
   POURQUOI : Applique les styles de style.css à cette page
   rel="stylesheet" : Type de relation (c'est une feuille de style)
   href="style.css" : Chemin vers le fichier CSS
   [OK] Peut en avoir plusieurs pour différents CSS

8. <body> ... </body>
   ───────────────────
   QUOI : Corps du document (CE QUE L'UTILISATEUR VOIT)
   POURQUOI : Tout le contenu visible va ici
   CONTIENT : titres, paragraphes, images, liens, etc.
   [OK] Un seul <body> par page


# ────────────────────────────────────────────────────────────────────────────
# [TEXTE] ANATOMIE D'UNE BALISE HTML
# ────────────────────────────────────────────────────────────────────────────

BALISE AVEC CONTENU :
  <p class="intro" id="premier">Mon texte ici</p>
   │  │            │            │              │
   │  │            │            │              └── Balise fermante
   │  │            │            └───────────────── Contenu
   │  │            └────────────────────────────── Attribut id
   │  └─────────────────────────────────────────── Attribut class
   └────────────────────────────────────────────── Balise ouvrante

BALISE VIDE (self-closing) :
  <img src="photo.jpg" alt="Description">
  <br>
  <hr>
  <input type="text">
  -> Ces balises N'ONT PAS de balise fermante (pas de contenu)

ATTRIBUTS :
  -> Les attributs fournissent des informations supplémentaires
  -> Format : nom="valeur" (guillemets autour de la valeur)
  -> Toujours dans la balise ouvrante

  Exemples d'attributs courants :
  id="identifiant"     -> Identifiant UNIQUE sur toute la page
  class="nom-classe"   -> Groupe d'éléments similaires (plusieurs possibles)
  style="color: red;"  -> Style CSS inline (à éviter)
  href="url"           -> Lien (sur <a>)
  src="chemin"         -> Source (sur <img>, <script>)
  alt="description"    -> Texte alternatif (sur <img>)

[IDEE] DIFFÉRENCE id VS class :
  id    -> Un seul élément sur la page  -> #mon-id en CSS
  class -> Plusieurs éléments possibles -> .ma-classe en CSS


# ────────────────────────────────────────────────────────────────────────────
# [NOTE] COMMENTAIRES HTML
# ────────────────────────────────────────────────────────────────────────────

SYNTAXE :
  <!-- Ceci est un commentaire sur une ligne -->

  <!--
    Commentaire
    sur plusieurs
    lignes
  -->

POURQUOI UTILISER LES COMMENTAIRES :
  -> Expliquer son code pour soi ou d'autres développeurs
  -> Désactiver temporairement du code
  -> Marquer des sections dans un long fichier HTML

[ATTENTION] Les commentaires HTML SONT VISIBLES dans le code source !
   -> Ne JAMAIS mettre de mots de passe ou données sensibles dedans
   -> Les utilisateurs peuvent voir "Afficher la source" (Ctrl+U)

EXEMPLES PRATIQUES :
  <!-- Navigation principale -->
  <nav>
    ...
  </nav>

  <!-- Section héros (grande bannière) -->
  <section id="hero">
    ...
  </section>

  <!-- TODO: Ajouter les liens des réseaux sociaux -->


# ────────────────────────────────────────────────────────────────────────────
# [DOSSIER] HIÉRARCHIE ET IMBRICATION
# ────────────────────────────────────────────────────────────────────────────

HTML = ARBRE de balises imbriquées

EXEMPLE :
  <body>                    <- Niveau 1 (racine)
    <header>                <- Niveau 2
      <nav>                 <- Niveau 3
        <ul>                <- Niveau 4
          <li>Accueil</li>  <- Niveau 5
          <li>Contact</li>  <- Niveau 5
        </ul>
      </nav>
    </header>
    <main>                  <- Niveau 2
      <h1>Titre</h1>        <- Niveau 3
      <p>Texte</p>          <- Niveau 3
    </main>
  </body>

RÈGLES D'IMBRICATION :
  [OK] Bon : <p><strong>Texte important</strong></p>
  [X] Mauvais : <p><strong>Texte</p></strong>  <- Croisement interdit !

  -> Les balises doivent être CORRECTEMENT fermées
  -> Une balise ouverte dans une autre doit être fermée AVANT le parent
  -> VS Code vous aide avec l'indentation et la coloration

[IDEE] INDENTATION = LISIBILITÉ
  -> 2 ou 4 espaces par niveau d'imbrication
  -> Rend le code lisible et facile à déboguer
  -> VS Code : Alt+Shift+F pour formater automatiquement


# ============================================================================
# [GUIDE] CHAPITRE 2 : BALISES DE TEXTE ET SÉMANTIQUE
# ============================================================================

[OBJECTIF] OBJECTIFS D'APPRENTISSAGE
  [OK] Utiliser les balises de titres (h1 à h6)
  [OK] Structurer des textes avec les bonnes balises
  [OK] Comprendre la sémantique HTML
  [OK] Mettre en valeur du texte correctement


# ────────────────────────────────────────────────────────────────────────────
# [NEWSPAPER] TITRES (h1 à h6)
# ────────────────────────────────────────────────────────────────────────────

Les titres créent une HIÉRARCHIE de contenu.

SYNTAXE :
  <h1>Titre principal</h1>         <- LE plus grand (1 seul par page)
  <h2>Titre de section</h2>        <- Sous-titre de h1
  <h3>Titre de sous-section</h3>   <- Sous-titre de h2
  <h4>Titre niveau 4</h4>
  <h5>Titre niveau 5</h5>
  <h6>Titre niveau 6</h6>          <- Le plus petit

EXEMPLE BIEN STRUCTURÉ :
  <h1>Guide de Cuisine</h1>           <- Titre du site/page
    <h2>Entrées</h2>                  <- Catégorie
      <h3>Salades</h3>                <- Sous-catégorie
        <h4>Salade Niçoise</h4>       <- Recette spécifique
    <h2>Plats Principaux</h2>
      <h3>Viandes</h3>
        <h4>Bœuf Bourguignon</h4>

RÈGLES IMPORTANTES :
  [OK] Un seul <h1> par page (le titre principal)
  [OK] Ne pas sauter de niveau (h1 -> h3 sans h2 = erreur sémantique)
  [OK] Utiliser pour la HIÉRARCHIE, pas pour la taille
  [X] Ne pas utiliser <h3> juste parce que la taille vous convient
  [IDEE] La taille se contrôle avec CSS !

POURQUOI LA HIÉRARCHIE EST IMPORTANTE :
  -> Google indexe mieux les pages bien structurées (SEO)
  -> Les lecteurs d'écran (accessibilité) naviguent par titres
  -> Le code est plus lisible et maintenable


# ────────────────────────────────────────────────────────────────────────────
# [FICHIER] PARAGRAPHES ET SAUTS DE LIGNE
# ────────────────────────────────────────────────────────────────────────────

PARAGRAPHE :
  <p>Ceci est un paragraphe de texte. Un paragraphe peut
  contenir plusieurs phrases. Le navigateur ignore les sauts
  de ligne dans le code HTML.</p>

  <p>Ceci est un deuxième paragraphe. Les navigateurs ajoutent
  automatiquement un espace entre les paragraphes.</p>

[IDEE] POURQUOI <p> ?
  -> Crée un "bloc" de texte avec espacement automatique
  -> Sémantiquement correct (dit "c'est un paragraphe")
  -> Les lecteurs d'écran font une pause entre les paragraphes

SAUT DE LIGNE <br> :
  <p>Ligne 1<br>
  Ligne 2<br>
  Ligne 3</p>

  [ATTENTION] Utiliser <br> SEULEMENT pour les sauts de ligne naturels :
    -> Adresses postales
    -> Poèmes
    -> [X] PAS pour ajouter de l'espace (utiliser CSS margin/padding)

LIGNE HORIZONTALE <hr> :
  <p>Section 1</p>
  <hr>
  <p>Section 2</p>

  -> Crée une ligne de séparation visuelle
  -> Sémantiquement = rupture thématique
  -> Style avec CSS : color, height, border


# ────────────────────────────────────────────────────────────────────────────
# * MISE EN FORME DU TEXTE - BALISES SÉMANTIQUES
# ────────────────────────────────────────────────────────────────────────────

BALISES AVEC SENS (sémantiques) :

<strong>Texte important</strong>
  -> Affichage : texte en GRAS
  -> SENS : Ce texte est IMPORTANT (fort)
  -> Lecteur d'écran : accentue la voix
  -> [OK] Utiliser pour le contenu vraiment important

<em>Texte avec emphase</em>
  -> Affichage : texte en ITALIQUE
  -> SENS : Emphase, stress particulier
  -> Lecteur d'écran : change l'intonation
  -> [OK] Utiliser pour l'insistance ou les titres d'œuvres

<mark>Texte surligné</mark>
  -> Affichage : texte SURLIGNÉ (jaune par défaut)
  -> SENS : Texte mis en évidence, résultat de recherche
  -> Ex : résultats en surbrillance dans une recherche

<small>Texte plus petit</small>
  -> Affichage : texte PLUS PETIT
  -> SENS : Remarques légales, copyright, avertissements

<del>Texte supprimé</del>
  -> Affichage : texte BARRÉ
  -> SENS : Contenu supprimé ou non pertinent
  -> Ex : ancien prix avant réduction

<ins>Texte inséré</ins>
  -> Affichage : texte SOULIGNÉ
  -> SENS : Contenu inséré/ajouté
  -> Ex : modifications dans un document

<sub>texte en indice</sub>   -> H₂O (formule chimique)
<sup>texte en exposant</sup>  -> x² (formule mathématique)

<code>console.log("hello")</code>
  -> Affichage : fonte monospace (Courier, etc.)
  -> SENS : Code informatique inline
  -> [OK] Pour du code dans un paragraphe

<pre>
  Texte préformaté
    Les espaces sont    conservés
</pre>
  -> Préserve espaces et sauts de ligne
  -> Utiliser avec <code> pour blocs de code

DIFFÉRENCE <strong>/<b> et <em>/<i> :
  <strong> vs <b> :
    <strong> -> Importance sémantique + gras visuel
    <b>      -> Seulement gras visuel (sans sens particulier)
    [OK] Préférer <strong> pour le contenu important
    <b> peut servir pour des mots-clés techniques

  <em> vs <i> :
    <em> -> Emphase sémantique + italique visuel
    <i>  -> Seulement italique visuel (terme technique, langue étrangère)
    [OK] Préférer <em> pour l'emphase vocale
    <i>  pour "raison de mer est un terme latin"

EXEMPLE COMBINÉ :
  <p>
    Pour réussir en programmation, il faut être
    <strong>persévérant</strong> et
    <em>curieux</em>.
    Le salaire moyen est de <mark>55 000€</mark>.
    Anciennement <del>45 000€</del>.
  </p>


# ────────────────────────────────────────────────────────────────────────────
# [LABEL] BALISES GÉNÉRIQUES : div ET span
# ────────────────────────────────────────────────────────────────────────────

Ces balises N'ONT PAS de sens sémantique.
Elles servent uniquement à GROUPER des éléments pour CSS/JS.

<div> = Division (BLOCK) :
  -> Crée un bloc (prend toute la largeur)
  -> Contient d'autres éléments HTML (paragraphes, images, etc.)
  -> Utilisé pour créer des sections/groupes visuels

  <div class="carte-produit">
    <h2>Laptop Pro</h2>
    <p>Prix : 999€</p>
    <img src="laptop.jpg" alt="Laptop Pro">
  </div>

<span> = (INLINE) :
  -> Contenu en ligne (ne crée pas de saut de ligne)
  -> Contient du texte ou d'autres éléments inline
  -> Utilisé pour styler une partie de texte

  <p>
    Le prix est de <span class="prix-rouge">999€</span> TTC.
  </p>

DIFFÉRENCE BLOCK vs INLINE :
  BLOCK (div, p, h1, ul...) :
    -> Prend TOUTE la largeur disponible
    -> Commence sur une NOUVELLE LIGNE
    -> On peut définir width et height

  INLINE (span, a, strong, em...) :
    -> Prend seulement la place nécessaire
    -> Reste SUR LA MÊME LIGNE
    -> width et height s'appliquent moins directement

QUAND UTILISER :
  [OK] <div> quand vous avez besoin d'un conteneur bloc pour le style
  [OK] <span> quand vous voulez styler une partie de texte inline
  [ATTENTION] Préférer les balises sémantiques (<header>, <nav>, <section>...) quand possible
  -> On verra ces balises dans le Chapitre 14


# ============================================================================
# [GUIDE] CHAPITRE 3 : LIENS, IMAGES ET MÉDIAS
# ============================================================================

[OBJECTIF] OBJECTIFS D'APPRENTISSAGE
  [OK] Créer des liens internes et externes
  [OK] Insérer et optimiser des images
  [OK] Comprendre les chemins relatifs et absolus
  [OK] Utiliser audio et vidéo HTML5


# ────────────────────────────────────────────────────────────────────────────
# [LIEN] LIENS - BALISE <a>
# ────────────────────────────────────────────────────────────────────────────

<a> = Anchor (Ancre) - La balise pour créer des liens HYPERTEXT

SYNTAXE DE BASE :
  <a href="https://www.google.com">Aller sur Google</a>
      │                            │
      └── Adresse de destination   └── Texte cliquable affiché

TYPES DE LIENS :

1. LIEN EXTERNE (vers un autre site) :
   <a href="https://www.github.com">GitHub</a>
   -> TOUJOURS inclure https:// pour les liens externes

2. LIEN INTERNE (vers une autre page du même site) :
   <a href="contact.html">Contact</a>
   <a href="pages/about.html">À propos</a>  <- dans un sous-dossier
   -> PAS de http://, juste le chemin du fichier

3. LIEN VERS UNE SECTION (ancre dans la page) :
   <!-- Créer la cible avec id -->
   <h2 id="contact">Section Contact</h2>

   <!-- Créer le lien vers cette cible -->
   <a href="#contact">Aller à Contact</a>
   -> # + id -> Défile la page jusqu'à cet élément

4. LIEN VERS UNE SECTION D'UNE AUTRE PAGE :
   <a href="about.html#equipe">Notre équipe</a>

5. LIEN EMAIL :
   <a href="mailto:contact@monsite.fr">Envoyer un email</a>
   -> Ouvre le client mail de l'utilisateur

6. LIEN TÉLÉPHONE :
   <a href="tel:+33123456789">01 23 45 67 89</a>
   -> Sur mobile : ouvre l'application téléphone

ATTRIBUTS IMPORTANTS DE <a> :

target="_blank"  -> Ouvre dans un NOUVEL ONGLET
  <a href="https://google.com" target="_blank">Google</a>
  [ATTENTION] Toujours ajouter rel="noopener noreferrer" pour la sécurité :
  <a href="https://google.com" target="_blank" rel="noopener noreferrer">Google</a>

title="..."  -> Infobulle au survol
  <a href="doc.pdf" title="Télécharger le PDF (2MB)">Documentation</a>

download  -> Force le téléchargement
  <a href="rapport.pdf" download>Télécharger</a>
  <a href="rapport.pdf" download="rapport-annuel.pdf">Télécharger</a>

LIEN AVEC IMAGE (image cliquable) :
  <a href="https://exemple.com">
    <img src="logo.png" alt="Exemple.com">
  </a>

ÉTATS DES LIENS (CSS à venir) :
  :link    -> Lien non visité
  :visited -> Lien visité (déjà cliqué)
  :hover   -> Survol de la souris
  :active  -> Clic en cours


# ────────────────────────────────────────────────────────────────────────────
# [DOSSIER] CHEMINS RELATIFS VS ABSOLUS
# ────────────────────────────────────────────────────────────────────────────

CHEMIN ABSOLU :
  -> Chemin complet depuis la racine du web
  -> https://www.monsite.com/images/photo.jpg
  -> Toujours valide, même si vous bougez les fichiers
  -> Pour les ressources externes

CHEMIN RELATIF :
  -> Chemin depuis le fichier HTML actuel
  -> Recommandé pour les ressources LOCALES

STRUCTURE D'EXEMPLE :
  mon-site/
  ├── index.html
  ├── about.html
  ├── images/
  │   ├── logo.png
  │   └── banner.jpg
  └── pages/
      └── contact.html

DEPUIS index.html :
  href="about.html"           -> Même dossier
  href="images/logo.png"      -> Dossier "images"
  href="pages/contact.html"   -> Dossier "pages"

DEPUIS pages/contact.html :
  href="../index.html"           -> Remonter d'un niveau (../)
  href="../images/logo.png"      -> Remonter puis entrer dans images/
  href="../about.html"           -> Remonter d'un niveau

[IDEE] ../ = "remonter d'un dossier"
   ./  = "dossier courant" (optionnel, souvent omis)


# ────────────────────────────────────────────────────────────────────────────
# [FRAME_WITH_PICTURE] IMAGES - BALISE <img>
# ────────────────────────────────────────────────────────────────────────────

SYNTAXE DE BASE :
  <img src="photo.jpg" alt="Description de la photo">

ATTRIBUTS OBLIGATOIRES :
  src  -> Source : chemin vers l'image
  alt  -> Texte alternatif : TOUJOURS remplir !

POURQUOI alt EST CRUCIAL :
  [OK] S'affiche si l'image ne charge pas
  [OK] Utilisé par les lecteurs d'écran (accessibilité)
  [OK] Indexé par Google Images (SEO)
  [OK] Apparaît lors du survol dans certains navigateurs

BONS ET MAUVAIS alt :
  [X] alt=""                              -> Vide (uniquement si image décorative)
  [X] alt="image"                         -> Trop vague
  [X] alt="photo.jpg"                     -> Nom de fichier ≠ description
  [OK] alt="Portrait de Marie Curie"       -> Descriptif
  [OK] alt="Logo de l'entreprise TechCorp" -> Contexte + sujet

ATTRIBUTS SUPPLÉMENTAIRES :
  width="500"   -> Largeur en pixels
  height="300"  -> Hauteur en pixels
  loading="lazy" -> Chargement différé (performance)

EXEMPLE COMPLET :
  <img
    src="images/equipe.jpg"
    alt="Photo de l'équipe de développement au bureau"
    width="800"
    height="400"
    loading="lazy"
  >

FORMATS D'IMAGES COURANTS :
  JPG/JPEG -> Photos, images réalistes (compression avec perte)
  PNG      -> Logos, illustrations, transparence (compression sans perte)
  SVG      -> Icônes, logos vectoriels (infiniment redimensionnable)
  WebP     -> Format moderne, plus léger (recommandé pour le web)
  GIF      -> Animations simples (résolution limitée)
  AVIF     -> Nouveau format ultra-compressé (Chrome/Firefox)

BALISE <figure> ET <figcaption> :
  -> Pour image avec légende
  <figure>
    <img src="graphique.png" alt="Graphique des ventes 2024">
    <figcaption>
      Graphique montrant l'évolution des ventes trimestrielles en 2024
    </figcaption>
  </figure>

[IDEE] <figure> est sémantique : dit "ce bloc est une illustration avec légende"


# ────────────────────────────────────────────────────────────────────────────
# [DEMARRAGE] VIDÉO - BALISE <video>
# ────────────────────────────────────────────────────────────────────────────

SYNTAXE DE BASE :
  <video width="640" height="360" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    Votre navigateur ne supporte pas la vidéo HTML5.
  </video>

ATTRIBUTS DE <video> :
  controls     -> Affiche les contrôles de lecture (play, pause, volume...)
  autoplay     -> Lance automatiquement ([ATTENTION] bloqué sur mobile sans muted)
  muted        -> Démarrer en sourdine
  loop         -> Répéter la vidéo en boucle
  poster="img" -> Image affichée avant lecture
  preload      -> "none" / "metadata" / "auto"

EXEMPLE AVEC TOUTES LES OPTIONS :
  <video
    width="100%"
    controls
    poster="vignette.jpg"
    preload="metadata"
  >
    <source src="presentation.mp4" type="video/mp4">
    <source src="presentation.webm" type="video/webm">
    <p>
      Votre navigateur ne supporte pas la vidéo.
      <a href="presentation.mp4">Télécharger la vidéo</a>
    </p>
  </video>

POURQUOI PLUSIEURS <source> :
  -> Différents navigateurs supportent différents formats
  -> Le navigateur choisit le premier qu'il supporte
  -> mp4 -> supporté partout
  -> webm -> meilleure compression, Chrome/Firefox


# ────────────────────────────────────────────────────────────────────────────
# [SON] AUDIO - BALISE <audio>
# ────────────────────────────────────────────────────────────────────────────

SYNTAXE :
  <audio controls>
    <source src="musique.mp3" type="audio/mpeg">
    <source src="musique.ogg" type="audio/ogg">
    Votre navigateur ne supporte pas l'audio HTML5.
  </audio>

ATTRIBUTS :
  controls -> Barre de lecture
  autoplay -> Lance automatiquement
  loop     -> Boucle
  muted    -> Sourdine

FORMATS :
  MP3  -> Universel, bonne compression
  OGG  -> Open source, Firefox/Chrome
  WAV  -> Qualité max, fichiers lourds
  AAC  -> Apple, bonne qualité


# ────────────────────────────────────────────────────────────────────────────
# [WINDOW] IFRAME - INTÉGRATION DE CONTENU EXTERNE
# ────────────────────────────────────────────────────────────────────────────

Un <iframe> intègre une page web dans une autre.

INTÉGRER UNE VIDÉO YOUTUBE :
  <!-- Copier le code depuis YouTube -> Partager -> Intégrer -->
  <iframe
    width="560"
    height="315"
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="Description de la vidéo"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope"
    allowfullscreen
  ></iframe>

INTÉGRER UNE GOOGLE MAPS :
  <iframe
    src="https://www.google.com/maps/embed?pb=VOTRE_CODE_ICI"
    width="600"
    height="450"
    style="border:0;"
    allowfullscreen=""
    loading="lazy"
  ></iframe>

[ATTENTION] SÉCURITÉ IFRAMES :
  -> N'intégrez que des sources de confiance
  -> Certains sites bloquent l'intégration iframe (X-Frame-Options)


# ============================================================================
# [GUIDE] CHAPITRE 4 : LISTES ET TABLEAUX
# ============================================================================

[OBJECTIF] OBJECTIFS D'APPRENTISSAGE
  [OK] Créer des listes non ordonnées, ordonnées et de définitions
  [OK] Créer des tableaux HTML structurés
  [OK] Utiliser les attributs pour améliorer les tableaux
  [OK] Savoir quand utiliser tableaux vs flexbox/grid


# ────────────────────────────────────────────────────────────────────────────
# [LISTE] LISTES
# ────────────────────────────────────────────────────────────────────────────

1. LISTE NON ORDONNÉE <ul> (Unordered List) :
   -> Éléments sans ordre particulier
   -> Affichage : puces (bullets) par défaut

   <ul>
     <li>JavaScript</li>
     <li>Python</li>
     <li>HTML/CSS</li>
   </ul>

   Résultat :
   • JavaScript
   • Python
   • HTML/CSS


2. LISTE ORDONNÉE <ol> (Ordered List) :
   -> Éléments avec un ordre/séquence
   -> Affichage : numéros par défaut

   <ol>
     <li>Ouvrir VS Code</li>
     <li>Créer index.html</li>
     <li>Écrire le code</li>
     <li>Ouvrir dans le navigateur</li>
   </ol>

   Résultat :
   1. Ouvrir VS Code
   2. Créer index.html
   3. Écrire le code
   4. Ouvrir dans le navigateur

   ATTRIBUTS DE <ol> :
   type="1"    -> Chiffres (défaut)
   type="A"    -> Lettres majuscules
   type="a"    -> Lettres minuscules
   type="I"    -> Chiffres romains majuscules
   type="i"    -> Chiffres romains minuscules
   start="5"   -> Commencer à 5
   reversed    -> Ordre décroissant

   Exemple :
   <ol type="A" start="3">
     <li>Point C</li>
     <li>Point D</li>
   </ol>


3. LISTE DE DÉFINITIONS <dl> :
   -> Pour des termes et leurs définitions
   -> Utilisé dans glossaires, FAQ, etc.

   <dl>
     <dt>HTML</dt>
     <dd>HyperText Markup Language - langage de balisage pour le web</dd>

     <dt>CSS</dt>
     <dd>Cascading Style Sheets - langage pour styliser les pages HTML</dd>
   </dl>

   dl = Definition List
   dt = Definition Term (terme)
   dd = Definition Description (définition)


4. LISTES IMBRIQUÉES :
   <ul>
     <li>Langages de programmation
       <ul>
         <li>Python</li>
         <li>JavaScript</li>
         <li>Java</li>
       </ul>
     </li>
     <li>Frameworks
       <ul>
         <li>React</li>
         <li>Django</li>
       </ul>
     </li>
   </ul>

   [OK] Utile pour menus de navigation, arborescences

RÈGLE D'OR :
  -> <li> doit toujours être enfant de <ul> ou <ol>
  [X] <ul><p>Texte</p></ul>  -> INVALIDE
  [OK] <ul><li>Texte</li></ul> -> VALIDE


# ────────────────────────────────────────────────────────────────────────────
# [GRAPHIQUE] TABLEAUX HTML
# ────────────────────────────────────────────────────────────────────────────

QUAND UTILISER UN TABLEAU :
  [OK] Données tabulaires (horaires, prix, comparatifs, statistiques)
  [OK] Informations organisées en lignes et colonnes AVEC sens
  [X] Mise en page (utilisez Flexbox/Grid à la place !)
  [X] Alignement de contenu

STRUCTURE DE BASE :
  <table>                              <- Le tableau lui-même
    <thead>                            <- En-tête du tableau
      <tr>                             <- Ligne (Table Row)
        <th>Nom</th>                   <- Cellule d'en-tête (Table Header)
        <th>Âge</th>
        <th>Ville</th>
      </tr>
    </thead>
    <tbody>                            <- Corps du tableau
      <tr>
        <td>Alice Martin</td>          <- Cellule de données (Table Data)
        <td>28</td>
        <td>Paris</td>
      </tr>
      <tr>
        <td>Bob Dupont</td>
        <td>35</td>
        <td>Lyon</td>
      </tr>
    </tbody>
    <tfoot>                            <- Pied de tableau (optionnel)
      <tr>
        <td colspan="2">Total</td>     <- Fusion de 2 colonnes
        <td>2 villes</td>
      </tr>
    </tfoot>
  </table>

BALISES DU TABLEAU :
  <table>    -> Conteneur principal
  <thead>    -> Groupe des lignes d'en-tête
  <tbody>    -> Groupe des lignes de données
  <tfoot>    -> Groupe des lignes de pied
  <tr>       -> Ligne du tableau (Table Row)
  <th>       -> Cellule d'en-tête (gras, centré par défaut)
  <td>       -> Cellule de données normale
  <caption>  -> Titre/légende du tableau

ATTRIBUTS IMPORTANTS :

  colspan="n" -> Fusionner n colonnes horizontalement
  rowspan="n" -> Fusionner n lignes verticalement

  Exemple fusion :
  <table>
    <tr>
      <th colspan="3">Semaine 1</th>   <- Occupe 3 colonnes
    </tr>
    <tr>
      <td>Lundi</td>
      <td>Mardi</td>
      <td>Mercredi</td>
    </tr>
    <tr>
      <td rowspan="2">Cours</td>       <- Occupe 2 lignes
      <td>Math</td>
      <td>Info</td>
    </tr>
    <tr>
      <!-- Pas de première cellule car rowspan la remplace -->
      <td>Physique</td>
      <td>Chimie</td>
    </tr>
  </table>

TABLEAU AVEC CAPTION ET SCOPE :
  <table>
    <caption>Résultats des étudiants - Semestre 1</caption>
    <thead>
      <tr>
        <th scope="col">Étudiant</th>
        <th scope="col">HTML</th>
        <th scope="col">CSS</th>
        <th scope="col">Moyenne</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Alice</th>     <- En-tête de ligne avec scope
        <td>18</td>
        <td>17</td>
        <td>17.5</td>
      </tr>
      <tr>
        <th scope="row">Bob</th>
        <td>15</td>
        <td>16</td>
        <td>15.5</td>
      </tr>
    </tbody>
  </table>

  scope="col" -> Cet en-tête concerne la COLONNE
  scope="row" -> Cet en-tête concerne la LIGNE
  -> Améliore l'accessibilité pour les lecteurs d'écran

STYLER UN TABLEAU EN CSS :
  table {
    width: 100%;
    border-collapse: collapse;   /* Fusionne les bordures */
  }

  th, td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
  }

  th {
    background-color: #4CAF50;
    color: white;
  }

  tr:hover {
    background-color: #f5f5f5;   /* Surlignage au survol */
  }

  tr:nth-child(even) {           /* Lignes paires en gris clair */
    background-color: #f2f2f2;
  }


# ============================================================================
# [COURS] EXERCICE PRATIQUE - FIN PARTIE 1
# ============================================================================

CAHIER DES CHARGES : Créer une page "Présentation Étudiant"

FICHIERS À CRÉER :
  ├── index.html
  ├── style.css (basique pour l'instant)
  └── images/
      └── photo.jpg (ou toute autre image)

CONTENU À INCLURE :

1. Structure HTML5 complète et valide :
   - DOCTYPE, html, head, body
   - charset UTF-8
   - viewport
   - title approprié
   - lien vers style.css

2. Une section "À propos de moi" :
   - Un <h1> avec votre nom
   - Un <h2> "À propos de moi"
   - Votre photo avec un alt descriptif
   - Un paragraphe de présentation avec au moins :
     * Du texte en <strong> (votre spécialité)
     * Du texte en <em> (une passion)

3. Une section "Mes compétences" :
   - Un <h2>
   - Une liste non ordonnée d'au moins 5 compétences techniques
   - Une liste ordonnée de vos 3 langages de programmation préférés

4. Un tableau "Mon Parcours" :
   - 3 colonnes : Année / Institution / Diplôme/Cours
   - Un thead avec les en-têtes
   - Au moins 3 lignes dans tbody
   - Un caption

5. Une section "Me contacter" :
   - Un lien email cliquable
   - Un lien vers LinkedIn ou GitHub (s'ouvre dans un nouvel onglet)

6. Au moins 3 commentaires HTML expliquant les sections

STYLE CSS MINIMALISTE (style.css) :
  body {
    font-family: Arial, sans-serif;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    color: #333;
  }

  h1 { color: #2c3e50; }
  h2 { color: #3498db; border-bottom: 2px solid #3498db; }

  img {
    max-width: 200px;
    border-radius: 50%;
  }

  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td { border: 1px solid #ddd; padding: 8px; }
  th { background-color: #3498db; color: white; }


# ────────────────────────────────────────────────────────────────────────────
# [OK] CORRIGÉ DE L'EXERCICE PARTIE 1
# ────────────────────────────────────────────────────────────────────────────

FICHIER : index.html
═══════════════════

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Portfolio de Marie Dupont, étudiante en génie logiciel">
    <title>Marie Dupont - Étudiante en Génie Logiciel</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <!-- Section En-tête principal -->
    <header>
        <h1>Marie Dupont</h1>
        <p>Étudiante en Génie Logiciel | 3e année</p>
    </header>

    <!-- Section À propos -->
    <section>
        <h2>À propos de moi</h2>

        <figure>
            <img
                src="images/photo.jpg"
                alt="Photo de profil de Marie Dupont, étudiante en génie logiciel"
                width="200"
                height="200"
            >
            <figcaption>Marie Dupont, 2024</figcaption>
        </figure>

        <p>
            Je suis étudiante en <strong>génie logiciel</strong> passionnée
            par le développement web et l'intelligence artificielle.
            En dehors des études, je suis <em>une grande amatrice de
            résolution d'algorithmes</em> et de projets open source.
        </p>

        <p>
            Mon objectif est de devenir développeuse full-stack et de
            contribuer à des projets à <strong>impact social positif</strong>.
        </p>
    </section>

    <!-- Section Compétences -->
    <section>
        <h2>Mes compétences</h2>

        <h3>Compétences techniques</h3>
        <ul>
            <li>HTML5 et CSS3</li>
            <li>JavaScript (ES6+)</li>
            <li>Python et Django</li>
            <li>Git et GitHub</li>
            <li>Bases de données SQL (MySQL, PostgreSQL)</li>
            <li>Notions de React et Vue.js</li>
        </ul>

        <h3>Mes langages préférés (en ordre)</h3>
        <ol>
            <li>Python - polyvalent et lisible</li>
            <li>JavaScript - incontournable pour le web</li>
            <li>Java - enseigné en cours, bonne rigueur OOP</li>
        </ol>
    </section>

    <!-- Section Parcours sous forme de tableau -->
    <section>
        <h2>Mon Parcours</h2>

        <table>
            <caption>Parcours académique de Marie Dupont</caption>
            <thead>
                <tr>
                    <th scope="col">Année</th>
                    <th scope="col">Institution</th>
                    <th scope="col">Diplôme / Formation</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>2018</td>
                    <td>Lycée Jean Moulin, Paris</td>
                    <td>Baccalauréat Scientifique - Mention Très Bien</td>
                </tr>
                <tr>
                    <td>2018 - 2020</td>
                    <td>IUT Informatique, Université Paris-Est</td>
                    <td>DUT Informatique</td>
                </tr>
                <tr>
                    <td>2020 - 2023</td>
                    <td>École d'Ingénieurs TechSup, Paris</td>
                    <td>Diplôme d'ingénieur - Génie Logiciel (en cours)</td>
                </tr>
            </tbody>
        </table>
    </section>

    <!-- Section Contact -->
    <section>
        <h2>Me contacter</h2>

        <p>
            [EMAIL] Email :
            <a href="mailto:marie.dupont@email.com">marie.dupont@email.com</a>
        </p>
        <p>
            [PRO] LinkedIn :
            <a
                href="https://www.linkedin.com/in/marie-dupont"
                target="_blank"
                rel="noopener noreferrer"
            >
                linkedin.com/in/marie-dupont
            </a>
        </p>
        <p>
            [CAT_FACE] GitHub :
            <a
                href="https://github.com/marie-dupont"
                target="_blank"
                rel="noopener noreferrer"
            >
                github.com/marie-dupont
            </a>
        </p>
    </section>

</body>
</html>


FICHIER : style.css
══════════════════

/* ===== RESET ET BASE ===== */
body {
    font-family: Arial, sans-serif;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    color: #333;
    line-height: 1.6;
}

/* ===== TITRES ===== */
h1 { color: #2c3e50; text-align: center; }
h2 {
    color: #3498db;
    border-bottom: 2px solid #3498db;
    padding-bottom: 5px;
}
h3 { color: #555; }

/* ===== IMAGE ===== */
figure {
    float: right;
    margin: 0 0 20px 20px;
}
img {
    max-width: 200px;
    border-radius: 50%;
    border: 3px solid #3498db;
}
figcaption {
    text-align: center;
    font-style: italic;
    color: #777;
}

/* ===== TABLEAU ===== */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}
caption {
    font-style: italic;
    margin-bottom: 10px;
    color: #666;
}
th, td {
    border: 1px solid #ddd;
    padding: 10px 12px;
    text-align: left;
}
th {
    background-color: #3498db;
    color: white;
}
tr:nth-child(even) {
    background-color: #f8f9fa;
}
tr:hover {
    background-color: #e8f4f8;
}

/* ===== LIENS ===== */
a { color: #3498db; }
a:hover { text-decoration: underline; color: #2980b9; }


# ============================================================================
# [DOCS] RÉCAPITULATIF PARTIE 1
# ============================================================================

CE QUE VOUS AVEZ APPRIS :

[OK] Structure HTML5 complète (DOCTYPE, head, body)
[OK] Métadonnées (charset, viewport, title, description)
[OK] Anatomie d'une balise (ouvrante, contenu, fermante, attributs)
[OK] Hiérarchie des titres (h1 à h6)
[OK] Balises de texte sémantiques (strong, em, mark, code...)
[OK] Différence block (div) vs inline (span)
[OK] Liens internes, externes, emails, téléphone (<a>)
[OK] Chemins relatifs et absolus
[OK] Images (<img>) avec alt, width, height
[OK] Vidéo et audio HTML5
[OK] Listes (ul, ol, dl) et imbrication
[OK] Tableaux (table, thead, tbody, tfoot, th, td)
[OK] Fusion de cellules (colspan, rowspan)

[CLE] POINTS CLÉS À RETENIR :
  1. Toujours commencer par <!DOCTYPE html>
  2. Toujours inclure charset="UTF-8"
  3. Toujours remplir l'attribut alt des images
  4. Un seul <h1> par page
  5. Utiliser les balises sémantiques (strong, em, etc.)
  6. Les tableaux = données tabulaires, PAS mise en page

-> PROCHAINE ÉTAPE : html_css_partie2.txt
   Vous allez apprendre à STYLISER tout ce que vous venez de créer !

# ============================================================================
# [LIVRE] HTML & CSS - PARTIE 2 : FONDAMENTAUX CSS
# ============================================================================
#
# [OBJECTIF] CETTE PARTIE COUVRE :
# - Chapitre 5 : Introduction au CSS
# - Chapitre 6 : Sélecteurs CSS
# - Chapitre 7 : Box Model
# - Chapitre 8 : Couleurs, Typographie, Backgrounds
#
# [TEMPS] TEMPS : ~5-6 heures
# [DOCS] PRÉREQUIS : Partie 1 complétée
# ============================================================================


# ============================================================================
# [GUIDE] CHAPITRE 5 : INTRODUCTION AU CSS
# ============================================================================

[OBJECTIF] OBJECTIFS D'APPRENTISSAGE
  [OK] Comprendre comment CSS fonctionne
  [OK] Connaître les 3 méthodes d'intégration CSS
  [OK] Comprendre la cascade et l'héritage
  [OK] Savoir mesurer avec les bonnes unités


# ────────────────────────────────────────────────────────────────────────────
# [MESURE] ANATOMIE D'UNE RÈGLE CSS
# ────────────────────────────────────────────────────────────────────────────

STRUCTURE COMPLÈTE :

  h1 {
    color: blue;
    font-size: 32px;
    margin: 20px 0;
  }

  h1          -> SÉLECTEUR : "Quel élément cibler ?"
  { }         -> BLOC DE DÉCLARATION
  color: blue -> DÉCLARATION (propriété + valeur)
  color       -> PROPRIÉTÉ CSS (ce qu'on change)
  blue        -> VALEUR (le nouveau style)
  ;           -> POINT-VIRGULE (obligatoire sauf pour la dernière déclaration)

EXEMPLE COMMENTÉ :
  /* Ce commentaire CSS est invisible dans le navigateur */

  p {                          /* Sélecteur : tous les <p> */
    color: #333;               /* Couleur du texte */
    font-size: 16px;           /* Taille de police */
    line-height: 1.6;          /* Hauteur de ligne */
    margin-bottom: 1em;        /* Espace sous le paragraphe */
  }

[IDEE] COMMENTAIRES CSS :
  /* Commentaire sur une ligne */
  /*
    Commentaire
    sur plusieurs lignes
  */


# ────────────────────────────────────────────────────────────────────────────
# [PLUGIN] 3 MÉTHODES D'INTÉGRATION CSS
# ────────────────────────────────────────────────────────────────────────────

MÉTHODE 1 : CSS EXTERNE (RECOMMANDÉE [OK])
─────────────────────────────────────────
Un fichier .css séparé, lié via <link> dans le <head>

  <!-- Dans le <head> du HTML -->
  <link rel="stylesheet" href="style.css">

  /* Dans style.css */
  body {
    font-family: Arial, sans-serif;
  }

  h1 {
    color: #2c3e50;
  }

POURQUOI C'EST LA MEILLEURE MÉTHODE :
  [OK] Un seul fichier CSS pour TOUTES les pages
  [OK] Modifier le style partout en un seul endroit
  [OK] Séparation claire HTML/CSS
  [OK] Le navigateur met le CSS en cache (performance)
  [OK] Facile à maintenir

MÉTHODE 2 : CSS INTERNE (Utilisation limitée)
──────────────────────────────────────────────
Balise <style> dans le <head>

  <head>
    <style>
      h1 {
        color: red;
      }
      p {
        font-size: 18px;
      }
    </style>
  </head>

QUAND UTILISER :
  [OK] Page unique sans CSS partagé
  [OK] Prototypes rapides
  [OK] Emails HTML (nécessite CSS inline ou interne)
  [X] Pour des projets multi-pages -> Utiliser CSS externe

MÉTHODE 3 : CSS INLINE (Éviter [X])
────────────────────────────────────
Attribut style="" directement sur l'élément HTML

  <h1 style="color: red; font-size: 24px;">Mon Titre</h1>
  <p style="color: blue; margin: 10px;">Mon texte</p>

QUAND UTILISER :
  [OK] Overrides dynamiques avec JavaScript
  [OK] Emails HTML (certains clients mail ne supportent pas les feuilles)
  [X] Style général -> Utiliser CSS externe
  [X] Difficile à maintenir et réutiliser

ORDRE DE PRIORITÉ (SPÉCIFICITÉ) :
  Inline > Internal > External  -> Plus local = plus prioritaire


# ────────────────────────────────────────────────────────────────────────────
# [WATER_WAVE] LA CASCADE CSS
# ────────────────────────────────────────────────────────────────────────────

CASCADE = Si plusieurs règles s'appliquent au même élément,
          LAQUELLE l'emporte ?

3 CRITÈRES (dans l'ordre) :

1. IMPORTANCE : !important
   -> Force une règle à l'emporter sur toutes les autres
   -> p { color: red !important; }
   [ATTENTION] Utiliser rarement ! Rend le CSS difficile à déboguer

2. SPÉCIFICITÉ : Score de spécificité
   -> Plus le sélecteur est "précis", plus il a priorité
   -> Calculé comme un score

3. ORDRE D'APPARITION :
   -> Si même spécificité -> La dernière règle l'emporte

CALCUL DE SPÉCIFICITÉ :
  Inline style    -> 1000 points
  ID (#id)        ->  100 points
  Class (.class)  ->   10 points
  Element (h1)    ->    1 point

  EXEMPLES :
  h1            -> 0001 (1 point)
  .titre         -> 0010 (10 points)
  #entete        -> 0100 (100 points)
  .nav a         -> 0011 (10 + 1 = 11 points)
  .nav .lien     -> 0020 (10 + 10 = 20 points)
  #header .nav a -> 0111 (100 + 10 + 1 = 111 points)

  Cas pratique :
  h1 { color: blue; }      -> 1 point
  .titre { color: red; }   -> 10 points -> RED GAGNE !

L'HÉRITAGE :
  -> Certaines propriétés CSS sont héritées par les enfants
  -> Exemples HÉRITÉES : color, font-size, font-family, line-height
  -> Exemples NON HÉRITÉES : margin, padding, border, width

  <div style="color: green;">
    <p>Ce texte est vert aussi (hérité)</p>
    <p style="color: red;">Mais celui-ci est rouge</p>
  </div>

  Forcer l'héritage :
  .enfant { color: inherit; }  -> Hérite de la couleur du parent


# ────────────────────────────────────────────────────────────────────────────
# [MESURE] UNITÉS CSS
# ────────────────────────────────────────────────────────────────────────────

UNITÉS ABSOLUES :
  px  -> Pixels - unité fixe, identique sur tous les écrans
        h1 { font-size: 32px; }
  pt  -> Points - surtout pour l'impression (1pt = 1.333px)
  cm  -> Centimètres - surtout impression
  mm  -> Millimètres - surtout impression
  in  -> Pouces (1in = 96px) - surtout impression

UNITÉS RELATIVES :
  em  -> Relatif à la taille de police du parent
        body { font-size: 16px; }
        h1 { font-size: 2em; } -> 2 × 16px = 32px
        [IDEE] Si le parent change, l'enfant change aussi

  rem -> Relatif à la taille de police de <html> (root em)
        html { font-size: 16px; }
        h1 { font-size: 2rem; } -> toujours 32px, peu importe le parent
        [OK] Plus prévisible que em pour les tailles de police

  %   -> Pourcentage du parent
        width: 50% -> La moitié de la largeur du parent
        font-size: 120% -> 120% de la taille du parent

  vw  -> Viewport Width : 1vw = 1% de la largeur de l'écran
        100vw = largeur totale de la fenêtre

  vh  -> Viewport Height : 1vh = 1% de la hauteur de l'écran
        100vh = hauteur totale de la fenêtre

  vmin -> La plus petite dimension (vw ou vh)
  vmax -> La plus grande dimension (vw ou vh)

  ch  -> Largeur du caractère "0" de la fonte actuelle
  ex  -> Hauteur de "x" de la fonte actuelle (rarement utilisé)

QUAND UTILISER QUOI :

  px  -> Borders, shadows, dimensions précises
  rem -> Font-size (recommandé pour accessibilité)
  em  -> Padding et margin (s'adapte à la taille de police)
  %   -> Largeurs de mise en page (fluides)
  vw/vh -> Sections pleine fenêtre, font-size fluide

EXEMPLE PRATIQUE :
  :root {
    font-size: 16px;   /* Base = 16px */
  }

  h1 { font-size: 2.5rem; }    /* 40px */
  h2 { font-size: 2rem; }      /* 32px */
  p  { font-size: 1rem; }      /* 16px */
  small { font-size: 0.85rem; }/* 13.6px */

  .hero {
    height: 100vh;             /* Toute la hauteur de l'écran */
    width: 100%;
  }

  .container {
    max-width: 1200px;         /* Largeur max en pixels */
    padding: 0 1.5rem;         /* Padding relatif à la police */
  }


# ============================================================================
# [GUIDE] CHAPITRE 6 : SÉLECTEURS CSS
# ============================================================================

[OBJECTIF] OBJECTIFS D'APPRENTISSAGE
  [OK] Utiliser tous les types de sélecteurs
  [OK] Combiner les sélecteurs
  [OK] Cibler des éléments précisément


# ────────────────────────────────────────────────────────────────────────────
# [OBJECTIF] TYPES DE SÉLECTEURS
# ────────────────────────────────────────────────────────────────────────────

1. SÉLECTEUR UNIVERSEL :
   * { margin: 0; padding: 0; box-sizing: border-box; }
   -> Cible TOUS les éléments
   -> Utiliser avec précaution (peut être lent)

2. SÉLECTEUR D'ÉLÉMENT (ou type) :
   h1 { color: red; }
   p  { font-size: 16px; }
   a  { text-decoration: none; }
   -> Cible tous les éléments de ce type dans la page

3. SÉLECTEUR DE CLASSE :
   .titre { color: blue; }
   .bouton-principal { background: green; }
   -> Commence par un point (.)
   -> Peut s'appliquer à PLUSIEURS éléments
   -> Un élément peut avoir PLUSIEURS classes

   HTML :
   <h1 class="titre">Mon titre</h1>
   <p class="titre sous-titre">Sous-titre</p>

   CSS :
   .titre { color: blue; }
   .sous-titre { font-size: 14px; }

4. SÉLECTEUR D'ID :
   #entete { background: gray; }
   #menu-principal { display: flex; }
   -> Commence par un dièse (#)
   -> Doit être UNIQUE dans la page
   -> Haute spécificité (éviter pour le style général)
   [OK] Utiliser pour du JavaScript, ancres ou style très spécifique

   HTML :
   <header id="entete">...</header>

   CSS :
   #entete { background: #333; color: white; }

5. SÉLECTEUR D'ATTRIBUT :
   [type]                -> Tout élément avec attribut type
   [type="email"]        -> Exact : type="email"
   [class~="intro"]      -> Contient le mot "intro"
   [href^="https"]       -> Commence par "https"
   [href$=".pdf"]        -> Finit par ".pdf"
   [href*="github"]      -> Contient "github"

   Exemples pratiques :
   input[type="text"] { border: 2px solid blue; }
   a[href^="https"] { color: green; }
   a[href$=".pdf"]::after { content: " (PDF)"; }
   img[alt=""] { border: 2px solid red; }  <- Trouver les alt manquants !


# ────────────────────────────────────────────────────────────────────────────
# [LIEN] COMBINAISONS DE SÉLECTEURS
# ────────────────────────────────────────────────────────────────────────────

1. SÉLECTEUR DESCENDANT (espace) :
   article p { color: gray; }
   -> Tous les <p> DANS un <article> (peu importe la profondeur)

   .card h2 { font-size: 20px; }
   -> Tous les <h2> à l'intérieur d'un élément .card

2. SÉLECTEUR ENFANT DIRECT (>) :
   ul > li { color: red; }
   -> Seulement les <li> DIRECTS enfants de <ul>
   -> Pas les <li> imbriqués dans un autre <ul>

   .nav > a { font-weight: bold; }

3. SÉLECTEUR FRÈRE ADJACENT (+) :
   h2 + p { font-weight: bold; }
   -> Le premier <p> qui suit IMMÉDIATEMENT un <h2>

   .alerte + p { margin-top: 0; }

4. SÉLECTEUR FRÈRE GÉNÉRAL (~) :
   h2 ~ p { color: gray; }
   -> Tous les <p> qui suivent un <h2> au même niveau

5. GROUPER LES SÉLECTEURS (,) :
   h1, h2, h3 { font-family: Georgia, serif; }
   .btn, input[type="submit"] { cursor: pointer; }
   -> Appliquer le même style à plusieurs sélecteurs

EXEMPLES PRATIQUES :

   nav > ul > li > a {
     text-decoration: none;
     color: white;
   }
   -> Liens directs dans li directs dans ul directs dans nav

   .formulaire label + input {
     margin-top: 5px;
   }
   -> input suivant directement un label dans .formulaire

   form label,
   form input,
   form textarea,
   form select {
     display: block;
     width: 100%;
     margin-bottom: 15px;
   }


# ────────────────────────────────────────────────────────────────────────────
# [CRYSTAL_BALL] PSEUDO-CLASSES
# ────────────────────────────────────────────────────────────────────────────

Pseudo-classes = États ou positions particuliers d'un élément.
Syntaxe : sélecteur:pseudo-classe

ÉTATS DES LIENS / BOUTONS :
  a:link    { color: blue; }      -> Lien non visité
  a:visited { color: purple; }    -> Lien déjà visité
  a:hover   { color: red; }       -> Survol souris
  a:active  { color: orange; }    -> Pendant le clic
  a:focus   { outline: 2px solid blue; } -> Focus (Tab)
  [OK] Toujours dans cet ordre : L-V-H-A (LoVe HAte)

  button:hover   { opacity: 0.8; }
  input:focus    { border-color: blue; box-shadow: 0 0 5px blue; }
  input:disabled { opacity: 0.5; cursor: not-allowed; }
  input:checked  { accent-color: green; }

PSEUDO-CLASSES STRUCTURELLES :
  li:first-child    -> Premier enfant
  li:last-child     -> Dernier enfant
  li:nth-child(2)   -> Deuxième enfant
  li:nth-child(odd) -> Enfants impairs (1, 3, 5...)
  li:nth-child(even)-> Enfants pairs (2, 4, 6...)
  li:nth-child(3n)  -> Tous les 3 éléments (3, 6, 9...)
  li:nth-child(3n+1)-> 1, 4, 7, 10...

  p:first-of-type   -> Premier <p> dans son parent
  p:last-of-type    -> Dernier <p> dans son parent
  p:nth-of-type(2)  -> Deuxième <p>

  p:only-child      -> P qui est le seul enfant
  p:only-of-type    -> P qui est le seul de son type

  div:empty         -> div sans contenu

PSEUDO-CLASSES LOGIQUES :
  :not(.classe)       -> Tout ce qui N'A PAS cette classe
  :not(p)             -> Tout ce qui n'est pas un <p>
  :is(h1, h2, h3)     -> Équivalent à h1, h2, h3 (plus pratique)
  :where(h1, h2, h3)  -> Comme :is() mais spécificité = 0
  :has(img)           -> Éléments qui CONTIENNENT une image (récent!)

  Exemples :
  li:not(:last-child) { margin-bottom: 10px; }
  :is(h1, h2, h3) { line-height: 1.2; }

FORMULES nth-child :
  :nth-child(n)    -> n = 0, 1, 2, 3... (mais child commence à 1)
  :nth-child(2n)   -> Pairs : 2, 4, 6...
  :nth-child(2n+1) -> Impairs : 1, 3, 5...
  :nth-child(3n+2) -> 2, 5, 8, 11...

  TABLE ZÉBRÉE :
  tr:nth-child(even) { background-color: #f2f2f2; }


# ────────────────────────────────────────────────────────────────────────────
# * PSEUDO-ÉLÉMENTS
# ────────────────────────────────────────────────────────────────────────────

Pseudo-éléments = Parties d'un élément ou éléments générés.
Syntaxe : sélecteur::pseudo-élément (double ::)

::before -> Insère contenu AVANT l'élément
  .required::before {
    content: "* ";
    color: red;
  }

::after -> Insère contenu APRÈS l'élément
  .prix::after {
    content: " €";
  }
  a[href$=".pdf"]::after {
    content: " [FICHIER]";
  }

::first-letter -> Première lettre du texte
  p::first-letter {
    font-size: 3em;
    float: left;
    line-height: 0.8;
  }

::first-line -> Première ligne du texte
  p::first-line {
    font-weight: bold;
    color: #333;
  }

::selection -> Texte sélectionné par l'utilisateur
  ::selection {
    background-color: #ffeb3b;
    color: black;
  }

::placeholder -> Texte placeholder des inputs
  input::placeholder {
    color: #aaa;
    font-style: italic;
  }

::marker -> Puce des listes
  li::marker {
    color: blue;
    content: "-> ";
  }

EXEMPLE PRATIQUE - Icônes via ::before :
  .icone-accueil::before { content: "[ACCUEIL] "; }
  .icone-user::before    { content: "[UTILISATEUR] "; }
  .icone-mail::before    { content: "[EMAIL] "; }


# ============================================================================
# [GUIDE] CHAPITRE 7 : BOX MODEL (MODÈLE DE BOÎTE)
# ============================================================================

[OBJECTIF] OBJECTIFS D'APPRENTISSAGE
  [OK] Comprendre le modèle de boîte CSS
  [OK] Maîtriser margin, padding, border
  [OK] Comprendre box-sizing
  [OK] Maîtriser display et visibility


# ────────────────────────────────────────────────────────────────────────────
# [PACKAGE] LE MODÈLE DE BOÎTE (BOX MODEL)
# ────────────────────────────────────────────────────────────────────────────

Chaque élément HTML est une BOÎTE avec 4 zones :

  ┌─────────────────────────────────────────┐
  │              MARGIN                      │  <- Espace EXTERNE (transparent)
  │  ┌────────────────────────────────────┐  │
  │  │            BORDER                  │  │  <- Bordure visible
  │  │  ┌─────────────────────────────┐   │  │
  │  │  │         PADDING             │   │  │  <- Espace INTERNE
  │  │  │  ┌────────────────────┐     │   │  │
  │  │  │  │     CONTENT        │     │   │  │  <- Le contenu (texte, image)
  │  │  │  └────────────────────┘     │   │  │
  │  │  └─────────────────────────────┘   │  │
  │  └────────────────────────────────────┘  │
  └─────────────────────────────────────────┘

CONTENT (Contenu) :
  -> La zone du contenu réel (texte, image, etc.)
  -> Dimensions : width et height

PADDING (Rembourrage) :
  -> Espace ENTRE le contenu et la bordure
  -> APPARTIENT à l'élément (même background)
  -> Ne peut pas être négatif

BORDER (Bordure) :
  -> Le contour visible de l'élément
  -> Peut être stylisé (couleur, épaisseur, style)

MARGIN (Marge) :
  -> Espace ENTRE l'élément et les autres éléments
  -> Transparent (ne prend pas la couleur de fond)
  -> Peut être négatif


# ────────────────────────────────────────────────────────────────────────────
# [MESURE] MARGIN ET PADDING
# ────────────────────────────────────────────────────────────────────────────

SYNTAXE DES VALEURS (identique pour margin et padding) :

  /* 1 valeur = tous les côtés */
  margin: 20px;       -> Haut=20, Droite=20, Bas=20, Gauche=20

  /* 2 valeurs = haut/bas   gauche/droite */
  margin: 20px 40px;  -> Haut/Bas=20, Gauche/Droite=40

  /* 3 valeurs = haut  gauche/droite  bas */
  margin: 10px 30px 20px; -> Haut=10, G/D=30, Bas=20

  /* 4 valeurs = haut  droite  bas  gauche (sens horaire) */
  margin: 10px 20px 30px 40px; -> H=10, D=20, B=30, G=40

  [IDEE] Moyen mémo-technique : "TRouBLe" -> Top Right Bottom Left

  /* Côtés séparés */
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 10px;
  margin-left: 20px;

  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;

CENTRER HORIZONTALEMENT AVEC MARGIN AUTO :
  .container {
    width: 800px;
    margin: 0 auto;  /* 0 haut/bas, auto gauche/droite */
  }
  -> auto = distribue l'espace disponible équitablement des deux côtés

COLLAPSING MARGINS (Fusion des marges) :
  -> Les marges verticales entre blocs se FUSIONNENT
  -> Seulement vertical, PAS horizontal

  h1 { margin-bottom: 30px; }
  p  { margin-top: 20px; }
  -> L'espace entre h1 et p = 30px (pas 50px !)
  -> La plus grande marge l'emporte

  ÉVITER LA FUSION :
  -> Ajouter overflow: hidden ou padding sur le parent
  -> Utiliser flexbox/grid (pas de fusion des marges)


# ────────────────────────────────────────────────────────────────────────────
# [BLACK_SQUARE_BUTTON] BORDER (BORDURES)
# ────────────────────────────────────────────────────────────────────────────

SYNTAXE RACCOURCIE :
  border: largeur style couleur;
  border: 2px solid #333;

PROPRIÉTÉS SÉPARÉES :
  border-width: 2px;
  border-style: solid;
  border-color: #333;

  /* Par côté */
  border-top:    2px solid red;
  border-right:  1px dashed blue;
  border-bottom: 3px dotted green;
  border-left:   none;

STYLES DE BORDURE (border-style) :
  none    -> Aucune bordure
  solid   -> Ligne continue ─────────
  dashed  -> Tirets ─ ─ ─ ─ ─
  dotted  -> Points ··········
  double  -> Double ligne ═══════
  groove  -> Effet 3D creusé
  ridge   -> Effet 3D surélevé
  inset   -> Effet enfoncé
  outset  -> Effet en relief

BORDER RADIUS (coins arrondis) :
  border-radius: 5px;        -> Tous les coins
  border-radius: 5px 10px;   -> <--> = 5, -><- = 10
  border-radius: 50%;        -> Cercle parfait (si width=height)

  /* Coins séparés */
  border-top-left-radius: 10px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 5px;

  /* Ellipse : horizontal vertical */
  border-radius: 50% / 30%;

EXEMPLES PRATIQUES :
  .card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
  }

  .avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;       /* Cercle */
    border: 3px solid white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  }

  .badge {
    border-radius: 20px;      /* Pilule/Pill */
    padding: 4px 12px;
    background: #2196f3;
    color: white;
  }


# ────────────────────────────────────────────────────────────────────────────
# [MESURE] BOX-SIZING
# ────────────────────────────────────────────────────────────────────────────

PROBLÈME AVEC LE BOX MODEL PAR DÉFAUT :

  .box {
    width: 300px;     /* Width = contenu seulement */
    padding: 20px;    /* Ajouté AU contenu */
    border: 2px solid;/* Ajouté encore */
  }
  -> Taille réelle = 300 + 20+20 + 2+2 = 344px [!]

  C'est le comportement par défaut : box-sizing: content-box

SOLUTION : box-sizing: border-box
  .box {
    box-sizing: border-box;  /* Width INCLUT padding et border */
    width: 300px;
    padding: 20px;
    border: 2px solid;
  }
  -> Taille réelle = 300px exactement [OK]
  -> Le contenu fait 300 - 40 - 4 = 256px

BONNE PRATIQUE UNIVERSELLE :
  /* Reset universel - À METTRE TOUJOURS EN PREMIER */
  *, *::before, *::after {
    box-sizing: border-box;
  }

  -> Plus de calculs surprenants
  -> Largeur définie = largeur visuelle
  -> 90% des développeurs utilisent ça


# ────────────────────────────────────────────────────────────────────────────
# [ECRAN] DISPLAY (AFFICHAGE)
# ────────────────────────────────────────────────────────────────────────────

La propriété display contrôle le COMPORTEMENT de l'élément.

display: block;
  -> Prend toute la largeur disponible
  -> Commence sur une nouvelle ligne
  -> Width et height applicables
  -> Exemples : <div>, <p>, <h1>, <section>

display: inline;
  -> Prend seulement la place nécessaire
  -> Reste sur la même ligne
  -> Width et height IGNORÉS
  -> margin/padding horizontal OK, vertical limité
  -> Exemples : <span>, <a>, <strong>, <em>

display: inline-block;
  -> Reste sur la même ligne MAIS
  -> Accepte width, height, margin, padding
  -> [OK] Combine le meilleur des deux
  -> Utile pour des boutons, icônes, images alignées

display: none;
  -> Retire l'élément de la page (espace libéré aussi)
  -> Différent de visibility: hidden (qui garde l'espace)
  -> Utilisé pour cacher/montrer des éléments

display: flex;     -> Flexbox (Chapitre 9)
display: grid;     -> CSS Grid (Chapitre 10)
display: table;    -> Comportement tableau (rare)

EXEMPLES PRATIQUES :

  /* Rendre un lien bloc pour qu'il prenne tout l'espace */
  .carte a {
    display: block;
    padding: 20px;
    text-decoration: none;
  }

  /* Aligner des éléments en ligne avec espacement */
  .tag {
    display: inline-block;
    background: #e3f2fd;
    padding: 4px 10px;
    border-radius: 20px;
    margin: 3px;
  }

  /* Cacher la navigation mobile par défaut */
  .menu-mobile {
    display: none;
  }
  .menu-mobile.ouvert {
    display: block;
  }

VISIBILITY vs DISPLAY :
  visibility: hidden -> Élément invisible mais OCCUPE son espace
  display: none      -> Élément invisible ET N'OCCUPE PAS son espace


# ────────────────────────────────────────────────────────────────────────────
# [SCENARIO] OVERFLOW (DÉBORDEMENT)
# ────────────────────────────────────────────────────────────────────────────

Que faire si le contenu dépasse la boîte ?

  overflow: visible; -> Déborde par défaut
  overflow: hidden;  -> Coupe ce qui dépasse
  overflow: scroll;  -> Ajoute des barres de défilement
  overflow: auto;    -> Barre de défilement seulement si nécessaire

  overflow-x: auto;  -> Défilement horizontal seulement
  overflow-y: auto;  -> Défilement vertical seulement

EXEMPLES :
  .boite-defilement {
    height: 200px;
    overflow-y: auto;
    border: 1px solid #ccc;
    padding: 10px;
  }

  .texte-tronque {
    width: 200px;
    overflow: hidden;
    white-space: nowrap;    /* Ne pas couper en plusieurs lignes */
    text-overflow: ellipsis; /* Ajouter ... à la fin */
  }


# ============================================================================
# [GUIDE] CHAPITRE 8 : COULEURS, TYPOGRAPHIE, BACKGROUNDS
# ============================================================================

[OBJECTIF] OBJECTIFS D'APPRENTISSAGE
  [OK] Maîtriser toutes les notations de couleurs
  [OK] Styler la typographie (polices, taille, espacement)
  [OK] Créer des fonds attractifs (couleurs, images, dégradés)


# ────────────────────────────────────────────────────────────────────────────
# [DESIGN] COULEURS EN CSS
# ────────────────────────────────────────────────────────────────────────────

1. NOMS DE COULEURS :
   color: red;
   color: blue;
   color: green;
   color: white;
   color: black;
   color: gray;
   color: transparent;
   -> 140+ couleurs nommées, mais limitées

2. HEXADÉCIMAL (#RRGGBB ou #RGB) :
   color: #ff0000;   -> Rouge (R=255, G=0, B=0)
   color: #00ff00;   -> Vert
   color: #0000ff;   -> Bleu
   color: #ffffff;   -> Blanc
   color: #000000;   -> Noir
   color: #333333;   -> Gris foncé
   color: #f5f5f5;   -> Gris très clair

   NOTATION COURTE (si lettres doublées) :
   #ff0000 -> #f00
   #ffffff -> #fff
   #000000 -> #000
   #336699 -> #369

   AVEC TRANSPARENCE (#RRGGBBAA) :
   color: #ff000080;  -> Rouge à 50% de transparence

3. RGB / RGBA :
   color: rgb(255, 0, 0);        -> Rouge
   color: rgb(51, 51, 51);       -> Gris #333
   color: rgba(0, 0, 0, 0.5);    -> Noir à 50% transparent
   color: rgba(255, 255, 255, 0.8); -> Blanc semi-transparent

   R, G, B -> 0 à 255
   A (alpha) -> 0 (transparent) à 1 (opaque)

4. HSL / HSLA (Hue Saturation Lightness) :
   color: hsl(0, 100%, 50%);     -> Rouge (hue=0°)
   color: hsl(120, 100%, 50%);   -> Vert (hue=120°)
   color: hsl(240, 100%, 50%);   -> Bleu (hue=240°)
   color: hsl(0, 0%, 50%);       -> Gris (saturation=0)
   color: hsla(0, 100%, 50%, 0.5); -> Rouge semi-transparent

   H (Hue/Teinte) -> 0-360° (roue des couleurs)
   S (Saturation) -> 0% (gris) à 100% (vivide)
   L (Lightness)  -> 0% (noir) à 100% (blanc)

   [OK] HSL est plus intuitif pour créer des palettes

5. COULEURS MODERNES :
   oklch(60% 0.2 30)  -> Notation perceptuelle moderne
   color-mix(in srgb, red 30%, blue) -> Mélange de couleurs

PROPRIÉTÉS QUI ACCEPTENT UNE COULEUR :
  color            -> Couleur du texte
  background-color -> Couleur de fond
  border-color     -> Couleur des bordures
  outline-color    -> Couleur du contour focus
  box-shadow       -> Couleur des ombres
  text-shadow      -> Couleur des ombres de texte

OPACITÉ :
  opacity: 0.5;    -> Rend l'élément ET son contenu semi-transparent
  rgba(...)        -> Seulement la couleur, pas le contenu

PALETTE DE COULEURS EXEMPLE :
  :root {
    --primaire: #3498db;
    --secondaire: #2ecc71;
    --danger: #e74c3c;
    --texte: #333333;
    --fond: #f8f9fa;
    --bordure: #e0e0e0;
  }


# ────────────────────────────────────────────────────────────────────────────
# [TEXTE] TYPOGRAPHIE
# ────────────────────────────────────────────────────────────────────────────

font-family : Famille de police
  p { font-family: Arial, Helvetica, sans-serif; }
  -> Valeur 1 : Police souhaitée
  -> Valeur 2+ : Polices de remplacement (fallback)
  -> Dernière valeur : Famille générique

  Familles génériques :
  serif      -> Polices avec empattements (Times, Georgia)
  sans-serif -> Sans empattements (Arial, Helvetica, Roboto)
  monospace  -> Largeur fixe (Courier, Consolas) -> code
  cursive    -> Manuscrite/cursive
  fantasy    -> Décoratives

  UTILISER DES POLICES GOOGLE FONTS :
  Dans <head> :
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

  En CSS :
  body { font-family: 'Roboto', sans-serif; }

font-size : Taille de police
  h1 { font-size: 2rem; }     /* 32px avec base 16px */
  p  { font-size: 1rem; }     /* 16px */
  small { font-size: 0.85rem; }/* 13.6px */

font-weight : Épaisseur
  font-weight: normal;   -> 400 (défaut)
  font-weight: bold;     -> 700
  font-weight: lighter;  -> Moins que le parent
  font-weight: bolder;   -> Plus que le parent
  font-weight: 100;      -> Ultra-léger (Thin)
  font-weight: 300;      -> Light
  font-weight: 400;      -> Regular
  font-weight: 500;      -> Medium
  font-weight: 600;      -> Semi-Bold
  font-weight: 700;      -> Bold
  font-weight: 800;      -> Extra-Bold
  font-weight: 900;      -> Black

font-style : Style
  font-style: normal;
  font-style: italic;    -> Italique
  font-style: oblique;   -> Penché (sans vraie fonte italique)

font-variant : Variante
  font-variant: normal;
  font-variant: small-caps; -> Petites majuscules

font (raccourci) :
  /* style  variant  weight  size/line-height  family */
  font: italic small-caps bold 16px/1.5 Georgia, serif;

line-height : Hauteur de ligne
  p { line-height: 1.6; }  -> Sans unité = ratio (recommandé)
  p { line-height: 24px; } -> Fixe
  p { line-height: 160%; } -> Relatif à la taille de police
  [OK] 1.4 à 1.8 est recommandé pour la lisibilité

ALIGNEMENT DU TEXTE :
  text-align: left;      -> Gauche (défaut)
  text-align: right;     -> Droite
  text-align: center;    -> Centré
  text-align: justify;   -> Justifié (éviter sur mobile)
  text-align: start;     -> Début (respecte la direction)
  text-align: end;       -> Fin

DÉCORATION DU TEXTE :
  text-decoration: none;          -> Aucune
  text-decoration: underline;     -> Souligné
  text-decoration: line-through;  -> Barré
  text-decoration: overline;      -> Surligné

  /* Contrôle fin */
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: wavy;    -> Ondulé
  text-decoration-thickness: 2px;

TRANSFORMATION DU TEXTE :
  text-transform: none;
  text-transform: uppercase;    -> TOUT EN MAJUSCULES
  text-transform: lowercase;    -> tout en minuscules
  text-transform: capitalize;   -> Première Lettre En Majuscule

ESPACEMENT :
  letter-spacing: 2px;   -> Espacement entre lettres (tracking)
  word-spacing: 5px;     -> Espacement entre mots
  text-indent: 30px;     -> Retrait de la première ligne

GESTION DES DÉBORDEMENTS DE TEXTE :
  white-space: nowrap;           -> Pas de retour à la ligne
  overflow: hidden;              -> Coupe le texte
  text-overflow: ellipsis;       -> Ajoute ... si débordement
  word-break: break-word;        -> Coupe les mots trop longs
  overflow-wrap: break-word;     -> Équivalent moderne

COMBINAISON TRONQUER :
  .texte-tronque {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }


# ────────────────────────────────────────────────────────────────────────────
# [FRAME_WITH_PICTURE] BACKGROUND (ARRIÈRE-PLAN)
# ────────────────────────────────────────────────────────────────────────────

COULEUR DE FOND :
  background-color: #f4f4f4;
  background-color: rgba(0, 0, 0, 0.5);
  background-color: transparent;

IMAGE DE FOND :
  background-image: url("images/banner.jpg");
  background-image: url("https://example.com/photo.jpg");

  RÉPÉTITION :
  background-repeat: repeat;    -> Répète dans toutes directions (défaut)
  background-repeat: no-repeat; -> N'affiche qu'une fois
  background-repeat: repeat-x;  -> Répète horizontalement
  background-repeat: repeat-y;  -> Répète verticalement
  background-repeat: space;     -> Répète avec espacement égal
  background-repeat: round;     -> Répète en ajustant la taille

  POSITION :
  background-position: center center; -> Centré
  background-position: top right;     -> En haut à droite
  background-position: 50% 50%;       -> Pareil que center center
  background-position: 20px 40px;     -> Précis en pixels

  TAILLE :
  background-size: auto;       -> Taille originale
  background-size: cover;      -> Couvre tout l'élément (recadré)
  background-size: contain;    -> Contenu entier visible
  background-size: 100% 100%;  -> Étire
  background-size: 300px 200px;-> Taille précise

  ATTACHEMENT :
  background-attachment: scroll; -> Défile avec la page (défaut)
  background-attachment: fixed;  -> Reste fixe (effet parallax)
  background-attachment: local;  -> Défile avec le contenu

DÉGRADÉS (GRADIENTS) :
  /* Linéaire */
  background-image: linear-gradient(direction, couleur1, couleur2);

  background-image: linear-gradient(to right, #ff6b6b, #feca57);
  background-image: linear-gradient(to bottom, blue, white);
  background-image: linear-gradient(45deg, red, blue);
  background-image: linear-gradient(to bottom right, #667eea, #764ba2);

  /* Avec plusieurs étapes */
  background-image: linear-gradient(to right,
    #ff6b6b 0%,
    #feca57 50%,
    #48dbfb 100%
  );

  /* Radial */
  background-image: radial-gradient(circle, #667eea, #764ba2);
  background-image: radial-gradient(ellipse at center, white, black);

  /* Conique */
  background-image: conic-gradient(red, yellow, green, blue, red);

FOND RACCOURCI :
  /* color image repeat position/size attachment */
  background: #fff url("bg.jpg") no-repeat center/cover fixed;

PLUSIEURS FONDS :
  /* Les fonds sont empilés, le premier est au-dessus */
  background:
    url("overlay.png") no-repeat center/cover,
    linear-gradient(to right, #ff6b6b, #feca57);

OMBRES :
  /* box-shadow: h-offset  v-offset  blur  spread  color */
  box-shadow: 2px 4px 8px 0px rgba(0,0,0,0.2);
  box-shadow: 0 2px 15px rgba(0,0,0,0.1);     /* Légère */
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);    /* Prononcée */
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.1); /* Intérieure */

  /* Plusieurs ombres */
  box-shadow:
    0 2px 4px rgba(0,0,0,0.1),
    0 8px 20px rgba(0,0,0,0.15);

  /* text-shadow */
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
  text-shadow: 0 0 10px gold;  /* Glow effect */


# ============================================================================
# [COURS] EXERCICE PRATIQUE - FIN PARTIE 2
# ============================================================================

CAHIER DES CHARGES : Créer une page "Carte de Profil" avec du CSS complet

OBJECTIF : Appliquer TOUS les concepts de la Partie 2 sur une seule page

CONTENU ATTENDU :

1. STRUCTURE HTML :
   - Page avec un header (navigation simple), main, footer
   - Dans main : une "carte de profil" centrée

2. LA CARTE DE PROFIL DOIT CONTENIR :
   - Une photo circulaire
   - Un nom (h1), un titre (h2), une courte bio (p)
   - 3 tags de compétences (.tag)
   - 2 boutons : "Contacter" et "Voir profil"
   - Des liens réseaux sociaux en bas

3. CSS OBLIGATOIRE :
   - Reset universel avec box-sizing: border-box
   - Google Font (Roboto ou autre)
   - Dégradé sur le fond de la carte
   - Box-shadow sur la carte
   - Border-radius sur la photo (cercle)
   - Hover sur les boutons (changement de couleur)
   - Pseudo-élément ::before sur les tags
   - Au moins 3 pseudo-classes différentes
   - Variables CSS pour les couleurs (--primaire, etc.)

4. BONUS :
   - Centrer la carte sur la page avec margin: auto
   - Animation de transition sur les boutons (:hover)


# ────────────────────────────────────────────────────────────────────────────
# [OK] CORRIGÉ DE L'EXERCICE PARTIE 2
# ────────────────────────────────────────────────────────────────────────────

FICHIER : profil.html
═════════════════════

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Carte de Profil - Marie Dupont</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="profil.css">
</head>
<body>

    <nav class="navbar">
        <span class="logo">MonPortfolio</span>
        <ul>
            <li><a href="#">Accueil</a></li>
            <li><a href="#">Projets</a></li>
            <li><a href="#" class="btn-nav">Contact</a></li>
        </ul>
    </nav>

    <main>
        <div class="carte">
            <!-- En-tête avec fond dégradé -->
            <div class="carte-entete">
                <img
                    src="https://i.pravatar.cc/150?img=47"
                    alt="Photo de profil de Marie Dupont"
                    class="avatar"
                >
            </div>

            <!-- Contenu principal -->
            <div class="carte-corps">
                <h1>Marie Dupont</h1>
                <h2>Développeuse Full-Stack</h2>
                <p class="bio">
                    Passionnée par le développement web et l'IA.
                    Je crée des expériences numériques <strong>élégantes</strong>
                    et <em>performantes</em>.
                </p>

                <!-- Tags de compétences -->
                <div class="tags">
                    <span class="tag">HTML/CSS</span>
                    <span class="tag">JavaScript</span>
                    <span class="tag">Python</span>
                    <span class="tag">React</span>
                    <span class="tag">Flask</span>
                </div>

                <!-- Statistiques -->
                <div class="stats">
                    <div class="stat">
                        <span class="stat-nombre">42</span>
                        <span class="stat-label">Projets</span>
                    </div>
                    <div class="stat">
                        <span class="stat-nombre">1.2k</span>
                        <span class="stat-label">Suiveurs</span>
                    </div>
                    <div class="stat">
                        <span class="stat-nombre">98%</span>
                        <span class="stat-label">Satisfaction</span>
                    </div>
                </div>

                <!-- Boutons d'action -->
                <div class="boutons">
                    <a href="mailto:marie@example.com" class="btn btn-primaire">
                        Contacter
                    </a>
                    <a href="#" class="btn btn-secondaire">
                        Voir Profil
                    </a>
                </div>

                <!-- Liens réseaux sociaux -->
                <div class="reseaux">
                    <a href="#" class="reseau github">GitHub</a>
                    <a href="#" class="reseau linkedin">LinkedIn</a>
                    <a href="#" class="reseau twitter">Twitter</a>
                </div>
            </div>
        </div>
    </main>

    <footer>
        <p>© 2024 Marie Dupont — Fait avec [HEAVY_BLACK_HEART] et HTML/CSS</p>
    </footer>

</body>
</html>


FICHIER : profil.css
════════════════════

/* ===== VARIABLES CSS ===== */
:root {
    --primaire: #667eea;
    --primaire-fonce: #5a67d8;
    --secondaire: #764ba2;
    --texte: #2d3748;
    --texte-clair: #718096;
    --fond: #f7fafc;
    --fond-carte: #ffffff;
    --bordure: #e2e8f0;
    --ombre: rgba(0, 0, 0, 0.1);
    --rayon: 12px;
    --transition: 0.3s ease;
}

/* ===== RESET ET BASE ===== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--fond);
    color: var(--texte);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ===== NAVIGATION ===== */
.navbar {
    background: white;
    border-bottom: 1px solid var(--bordure);
    padding: 15px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--primaire);
}

.navbar ul {
    list-style: none;
    display: flex;
    gap: 20px;
    align-items: center;
}

.navbar a {
    text-decoration: none;
    color: var(--texte-clair);
    font-weight: 500;
    transition: color var(--transition);
}

.navbar a:hover { color: var(--primaire); }

.btn-nav {
    background: var(--primaire);
    color: white !important;
    padding: 8px 18px;
    border-radius: 20px;
}

.btn-nav:hover {
    background: var(--primaire-fonce);
    color: white !important;
}

/* ===== MAIN ===== */
main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

/* ===== CARTE ===== */
.carte {
    width: 100%;
    max-width: 380px;
    background: var(--fond-carte);
    border-radius: var(--rayon);
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.07),
        0 20px 40px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition);
}

.carte:hover {
    transform: translateY(-5px);
    box-shadow:
        0 8px 12px rgba(0, 0, 0, 0.1),
        0 30px 50px rgba(0, 0, 0, 0.15);
}

/* ===== EN-TÊTE DÉGRADÉ ===== */
.carte-entete {
    background: linear-gradient(135deg, var(--primaire), var(--secondaire));
    padding: 40px 20px 60px;
    display: flex;
    justify-content: center;
}

/* ===== AVATAR ===== */
.avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    margin-top: 10px;
}

/* ===== CORPS DE LA CARTE ===== */
.carte-corps {
    padding: 20px 30px 30px;
    text-align: center;
    margin-top: -40px;
}

.carte-corps h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--texte);
    margin-top: 15px;
    margin-bottom: 4px;
}

.carte-corps h2 {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--primaire);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.bio {
    font-size: 0.9rem;
    color: var(--texte-clair);
    line-height: 1.6;
    margin-bottom: 20px;
}

/* ===== TAGS ===== */
.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 25px;
}

.tag {
    display: inline-block;
    background: #eef2ff;
    color: var(--primaire);
    font-size: 0.78rem;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid #c7d2fe;
    transition: all var(--transition);
}

/* Pseudo-élément ::before sur les tags */
.tag::before {
    content: "# ";
    opacity: 0.6;
}

.tag:hover {
    background: var(--primaire);
    color: white;
    border-color: var(--primaire);
}

/* ===== STATISTIQUES ===== */
.stats {
    display: flex;
    justify-content: space-around;
    padding: 20px 0;
    border-top: 1px solid var(--bordure);
    border-bottom: 1px solid var(--bordure);
    margin-bottom: 25px;
}

.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.stat-nombre {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--texte);
}

.stat-label {
    font-size: 0.75rem;
    color: var(--texte-clair);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ===== BOUTONS ===== */
.boutons {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.btn {
    flex: 1;
    padding: 10px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    text-align: center;
    transition: all var(--transition);
    cursor: pointer;
}

.btn-primaire {
    background: linear-gradient(135deg, var(--primaire), var(--secondaire));
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.btn-primaire:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
}

.btn-primaire:active {
    transform: translateY(0);
}

.btn-secondaire {
    background: transparent;
    color: var(--primaire);
    border: 2px solid var(--primaire);
}

.btn-secondaire:hover {
    background: var(--primaire);
    color: white;
}

/* ===== RÉSEAUX SOCIAUX ===== */
.reseaux {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.reseau {
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 6px;
    transition: all var(--transition);
}

.github  { background: #24292e; color: white; }
.linkedin{ background: #0077b5; color: white; }
.twitter { background: #1da1f2; color: white; }

.reseau:hover { opacity: 0.85; transform: scale(1.05); }

/* ===== FOOTER ===== */
footer {
    text-align: center;
    padding: 20px;
    color: var(--texte-clair);
    font-size: 0.85rem;
    border-top: 1px solid var(--bordure);
    background: white;
}


# ============================================================================
# [DOCS] RÉCAPITULATIF PARTIE 2
# ============================================================================

CE QUE VOUS AVEZ APPRIS :

[OK] Anatomie d'une règle CSS (sélecteur, propriété, valeur)
[OK] 3 méthodes d'intégration (externe [OK], interne, inline)
[OK] La cascade et la spécificité
[OK] L'héritage CSS
[OK] Toutes les unités CSS (px, rem, em, %, vw, vh)
[OK] Sélecteurs élémentaires (*, element, .class, #id)
[OK] Sélecteurs d'attributs
[OK] Combinaisons (descendant, enfant >, adjacent +, frère ~)
[OK] Pseudo-classes (:hover, :nth-child, :not, etc.)
[OK] Pseudo-éléments (::before, ::after, ::first-letter)
[OK] Le Box Model (content, padding, border, margin)
[OK] box-sizing: border-box <- IMPORTANT !
[OK] display (block, inline, inline-block, none)
[OK] overflow
[OK] Toutes les notations de couleurs (hex, rgb, hsl)
[OK] Typographie (font-family, font-size, font-weight, etc.)
[OK] Backgrounds (couleur, image, dégradés)
[OK] Box-shadow et text-shadow

-> PROCHAINE ÉTAPE : html_css_partie3.txt
   Mise en page avec Flexbox, CSS Grid et Responsive Design !

# ============================================================================
# [LIVRE] HTML & CSS - PARTIE 3 : MISE EN PAGE
# ============================================================================
#
# [OBJECTIF] CETTE PARTIE COUVRE :
# - Chapitre 9  : Flexbox
# - Chapitre 10 : CSS Grid
# - Chapitre 11 : Positionnement (position)
# - Chapitre 12 : Responsive Design & Media Queries
#
# [TEMPS] TEMPS : ~6-8 heures
# [DOCS] PRÉREQUIS : Parties 1 & 2 complétées
# ============================================================================


# ============================================================================
# [GUIDE] CHAPITRE 9 : FLEXBOX
# ============================================================================

[OBJECTIF] OBJECTIFS D'APPRENTISSAGE
  [OK] Comprendre le modèle Flexbox
  [OK] Maîtriser toutes les propriétés du conteneur flex
  [OK] Maîtriser toutes les propriétés des enfants flex
  [OK] Créer des mises en page flexibles courantes


# ────────────────────────────────────────────────────────────────────────────
# [REFLEXION] QU'EST-CE QUE FLEXBOX ?
# ────────────────────────────────────────────────────────────────────────────

Flexbox = Flexible Box Layout
-> Système de mise en page UNIDIMENSIONNEL (1D : ligne OU colonne)
-> Distribue l'espace entre les éléments d'un conteneur
-> Supporte bien les tailles inconnues / dynamiques

ANALOGIE :
  Imaginez une boîte avec des blocs dedans.
  Flexbox vous permet de décider :
  -> Dans quel sens les ranger (ligne ou colonne)
  -> Comment les espacer
  -> Comment les aligner
  -> Que faire de l'espace vide

QUAND UTILISER FLEXBOX :
  [OK] Aligner des éléments sur une ligne (navigation, boutons...)
  [OK] Centrer verticalement et horizontalement
  [OK] Distribuer l'espace entre des éléments
  [OK] Colonnes de même hauteur
  [OK] Éléments qui s'adaptent à l'espace disponible

QUAND UTILISER GRID À LA PLACE :
  -> Mise en page 2D (lignes ET colonnes)
  -> Grilles complexes (tableau de bord, galerie)
  -> Quand vous avez besoin de contrôler les 2 dimensions


# ────────────────────────────────────────────────────────────────────────────
# [CONSTRUCTION] ACTIVER FLEXBOX
# ────────────────────────────────────────────────────────────────────────────

  .conteneur {
    display: flex;       <- Rend cet élément un FLEX CONTAINER
  }

  -> Ses enfants DIRECTS deviennent des FLEX ITEMS
  -> Ils se placent en LIGNE par défaut

  HTML :
  <div class="conteneur">   <- Flex Container
    <div>Item 1</div>        <- Flex Item
    <div>Item 2</div>        <- Flex Item
    <div>Item 3</div>        <- Flex Item
  </div>


AXES FLEXBOX :
  ┌──────────────────────── AXE PRINCIPAL (Main Axis) ────────────[BLACK_RIGHT-POINTING_POINTER]
  │  ┌─────────┐  ┌─────────┐  ┌─────────┐
  │  │  Item 1 │  │  Item 2 │  │  Item 3 │
  │  └─────────┘  └─────────┘  └─────────┘
  │
  [BLACK_DOWN-POINTING_TRIANGLE] AXE CROISÉ (Cross Axis)

  -> flex-direction: row (défaut) : Axe principal = horizontal
  -> flex-direction: column      : Axe principal = vertical


# ────────────────────────────────────────────────────────────────────────────
# [PACKAGE] PROPRIÉTÉS DU CONTENEUR (PARENT)
# ────────────────────────────────────────────────────────────────────────────

1. flex-direction : Direction des éléments

  flex-direction: row;            -> <- -> de gauche à droite (défaut)
  flex-direction: row-reverse;    -> -> <- de droite à gauche
  flex-direction: column;         -> v de haut en bas
  flex-direction: column-reverse; -> ^ de bas en haut

2. flex-wrap : Retour à la ligne

  flex-wrap: nowrap;  -> Tout sur une seule ligne (défaut) - peut déborder
  flex-wrap: wrap;    -> Passe à la ligne suivante si pas de place
  flex-wrap: wrap-reverse; -> Passe à la ligne du dessus

  [OK] Utiliser wrap pour une mise en page responsive

3. flex-flow : Raccourci (direction + wrap)

  flex-flow: row wrap;
  flex-flow: column nowrap;

4. justify-content : Alignement sur l'AXE PRINCIPAL

  justify-content: flex-start;    -> Items au début <- (défaut)
  justify-content: flex-end;      -> Items à la fin ->
  justify-content: center;        -> Items centrés au milieu
  justify-content: space-between; -> Espace égal ENTRE les items
  justify-content: space-around;  -> Espace égal AUTOUR de chaque item
  justify-content: space-evenly;  -> Espace strictement égal partout

  VISUALISATION (flex-direction: row) :
  flex-start :   [1][2][3]        __________
  flex-end :     __________       [1][2][3]
  center :       _____[1][2][3]_____
  space-between: [1]_____[2]_____[3]
  space-around:  _[1]__[2]__[3]_
  space-evenly:  __[1]__[2]__[3]__

5. align-items : Alignement sur l'AXE CROISÉ (pour une ligne)

  align-items: stretch;    -> S'étire pour remplir (défaut)
  align-items: flex-start; -> En haut (si row)
  align-items: flex-end;   -> En bas (si row)
  align-items: center;     -> Centré verticalement (si row)
  align-items: baseline;   -> Aligné sur la ligne de base du texte

6. align-content : Alignement des LIGNES (si flex-wrap: wrap)

  align-content: flex-start;    -> Lignes en haut
  align-content: flex-end;      -> Lignes en bas
  align-content: center;        -> Lignes centrées
  align-content: space-between; -> Espace entre les lignes
  align-content: space-around;  -> Espace autour des lignes
  align-content: stretch;       -> Lignes s'étirent (défaut)

  [ATTENTION] Seulement visible si flex-wrap: wrap ET plusieurs lignes

7. gap : Espacement entre les items

  gap: 20px;          -> Même espacement horizontal et vertical
  gap: 10px 20px;     -> 10px vertical, 20px horizontal
  row-gap: 10px;      -> Seulement vertical
  column-gap: 20px;   -> Seulement horizontal


# ────────────────────────────────────────────────────────────────────────────
# [BLACK_SQUARE_BUTTON] PROPRIÉTÉS DES ITEMS (ENFANTS)
# ────────────────────────────────────────────────────────────────────────────

1. flex-grow : Capacité à GRANDIR

  flex-grow: 0;  -> Ne grandit pas (défaut)
  flex-grow: 1;  -> Prend l'espace disponible
  flex-grow: 2;  -> Prend 2× plus d'espace qu'un item avec flex-grow: 1

  EXEMPLE :
  .item-a { flex-grow: 1; }  -> 1/3 de l'espace libre
  .item-b { flex-grow: 2; }  -> 2/3 de l'espace libre

2. flex-shrink : Capacité à RÉTRÉCIR

  flex-shrink: 1;  -> Peut rétrécir si pas de place (défaut)
  flex-shrink: 0;  -> Ne rétrécit jamais (taille fixe)

3. flex-basis : Taille de BASE avant distribution

  flex-basis: auto;   -> Basé sur width/height (défaut)
  flex-basis: 200px;  -> 200px de base
  flex-basis: 30%;    -> 30% du conteneur
  flex-basis: 0;      -> Taille 0, tout vient de flex-grow

4. flex : Raccourci (grow shrink basis)

  flex: 1;            -> flex: 1 1 0%  (grandit et rétrécit)
  flex: auto;         -> flex: 1 1 auto
  flex: none;         -> flex: 0 0 auto (rigide)
  flex: 0 0 200px;    -> Taille fixe de 200px
  flex: 1 0 300px;    -> Minimum 300px, peut grandir
  flex: 2;            -> Prend 2× plus d'espace que flex: 1

5. align-self : Override align-items pour UN item

  align-self: auto;       -> Hérite de align-items
  align-self: flex-start; -> S'aligne en haut
  align-self: flex-end;   -> S'aligne en bas
  align-self: center;     -> Centré
  align-self: stretch;    -> S'étire

6. order : Ordre d'affichage

  order: 0;    -> Position normale (défaut)
  order: -1;   -> Avant tous les autres
  order: 1;    -> Après les items avec order: 0
  order: 2;    -> Encore plus loin

  .dernier-a-afficher-en-premier { order: -1; }


# ────────────────────────────────────────────────────────────────────────────
# [IDEE] PATTERNS FLEXBOX COURANTS
# ────────────────────────────────────────────────────────────────────────────

CENTRER UN ÉLÉMENT (horizontal + vertical) :
  .conteneur {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;          /* Ou autre hauteur */
  }

NAVIGATION AVEC LOGO À GAUCHE ET LIENS À DROITE :
  nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
  }
  /* Logo à gauche, liens à droite automatiquement */

CARTES AVEC MÊME HAUTEUR :
  .grille-cartes {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }
  .carte {
    flex: 1 1 280px;   /* Min 280px, peut grandir */
    display: flex;
    flex-direction: column;
  }
  .carte-corps { flex: 1; } /* Le corps s'étire */
  .carte-pied { margin-top: auto; } /* Pousse vers le bas */

LAYOUT SAINT GRAAL (header + sidebar + main + aside + footer) :
  .page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  header { /* ... */ }
  .contenu-principal {
    display: flex;
    flex: 1;
  }
  aside.gauche { width: 200px; flex-shrink: 0; }
  main { flex: 1; }
  aside.droite { width: 200px; flex-shrink: 0; }
  footer { /* ... */ }

POUSSER UN ÉLÉMENT À DROITE :
  nav {
    display: flex;
    align-items: center;
  }
  .pousser-droite { margin-left: auto; } /* Le reste est à gauche */

LISTE HORIZONTALE DE BOUTONS :
  .boutons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }


# ============================================================================
# [GUIDE] CHAPITRE 10 : CSS GRID
# ============================================================================

[OBJECTIF] OBJECTIFS D'APPRENTISSAGE
  [OK] Comprendre le système de grille CSS
  [OK] Définir lignes et colonnes
  [OK] Placer des éléments dans la grille
  [OK] Créer des mises en page complexes


# ────────────────────────────────────────────────────────────────────────────
# [REFLEXION] QU'EST-CE QUE CSS GRID ?
# ────────────────────────────────────────────────────────────────────────────

CSS Grid = Système de mise en page BIDIMENSIONNEL (2D)
-> Contrôle simultané des LIGNES et des COLONNES
-> Parfait pour les mises en page complexes

FLEXBOX vs GRID :
  Flexbox : Un axe à la fois (soit ligne, soit colonne)
  Grid    : Deux axes simultanément (lignes ET colonnes)

QUAND UTILISER GRID :
  [OK] Mise en page globale de la page
  [OK] Galerie de photos
  [OK] Dashboard
  [OK] Formulaires complexes sur plusieurs colonnes
  [OK] Tout ce qui ressemble à un tableau visuel

ACTIVER GRID :
  .conteneur {
    display: grid;
  }


# ────────────────────────────────────────────────────────────────────────────
# [CONSTRUCTION] DÉFINIR LA GRILLE (CONTENEUR)
# ────────────────────────────────────────────────────────────────────────────

1. grid-template-columns : Définir les colonnes

  /* 3 colonnes de 200px */
  grid-template-columns: 200px 200px 200px;

  /* 3 colonnes égales */
  grid-template-columns: 1fr 1fr 1fr;

  /* Colonnes variées */
  grid-template-columns: 200px 1fr 2fr;
  /* 1ère: 200px, 2ème: 1/3 du restant, 3ème: 2/3 du restant */

  /* Répétition */
  grid-template-columns: repeat(3, 1fr);          /* 3 colonnes égales */
  grid-template-columns: repeat(4, 25%);           /* 4 colonnes de 25% */
  grid-template-columns: repeat(3, 1fr 2fr);       /* 1fr 2fr 1fr 2fr 1fr 2fr */

  /* Auto-fill : remplir automatiquement */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  /* Autant de colonnes de 200px minimum que possible */

  /* Auto-fit : comme auto-fill mais éléments s'étirent */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  /* Colonnes nommées */
  grid-template-columns: [debut] 200px [milieu] 1fr [fin];

2. grid-template-rows : Définir les lignes

  grid-template-rows: 100px 1fr 50px;  /* Entête, contenu, footer */
  grid-template-rows: auto 1fr auto;   /* auto = taille du contenu */

3. grid-template : Raccourci (rows / columns)

  grid-template: 100px 1fr 50px / 200px 1fr;

4. gap : Espacement entre cellules

  gap: 20px;          -> Même gap rows et columns
  gap: 20px 30px;     -> row-gap column-gap
  row-gap: 20px;
  column-gap: 30px;

5. grid-template-areas : Zones nommées (très lisible!)

  .page {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: 80px 1fr 60px;
    grid-template-areas:
      "header  header"
      "sidebar main"
      "footer  footer";
    min-height: 100vh;
  }

  /* Puis assigner les éléments aux zones */
  header  { grid-area: header; }
  .sidebar{ grid-area: sidebar; }
  main    { grid-area: main; }
  footer  { grid-area: footer; }

  -> Très lisible et maintenable !
  -> Le schéma visuel du template correspond au rendu

6. justify-items / align-items : Alignement dans les cellules

  justify-items: start;     -> Gauche
  justify-items: end;       -> Droite
  justify-items: center;    -> Centré horizontal
  justify-items: stretch;   -> S'étire (défaut)

  align-items: start;       -> Haut
  align-items: end;         -> Bas
  align-items: center;      -> Centré vertical
  align-items: stretch;     -> S'étire (défaut)

  place-items: center;      -> justify-items + align-items = center

7. justify-content / align-content : Alignement de la grille

  Similaire à Flexbox, mais pour la grille entière dans le conteneur


# ────────────────────────────────────────────────────────────────────────────
# [IMPORTANT] PLACER LES ITEMS (ENFANTS)
# ────────────────────────────────────────────────────────────────────────────

PLACEMENT PAR NUMÉRO DE LIGNE :

  La grille avec 3 colonnes a des LIGNES NUMÉROTÉES :
  |1    |2    |3    |4
  ^     ^     ^     ^
  Les séparations sont numérotées de 1 à n+1

  .item {
    grid-column-start: 1;   /* Commence à la ligne verticale 1 */
    grid-column-end: 3;     /* Finit à la ligne verticale 3 */
    /* Occupe 2 colonnes */
  }

  RACCOURCIS :
  grid-column: 1 / 3;       /* start / end */
  grid-column: 1 / span 2;  /* Commence à 1, s'étend sur 2 */
  grid-column: span 2;      /* S'étend sur 2, peu importe où */
  grid-column: 1 / -1;      /* De 1 à la dernière ligne */

  grid-row: 1 / 3;          /* Occupe 2 lignes */
  grid-row: 2 / span 3;     /* Ligne 2, s'étend sur 3 */

  place-self: center;        /* justify-self + align-self */

PLACEMENT PAR ZONE NOMMÉE :
  /* Avec grid-template-areas défini dans le parent */
  .entete  { grid-area: header; }
  .sidebar { grid-area: sidebar; }
  main     { grid-area: main; }

PLACEMENT AUTO :
  -> Sans spécification, les items se placent dans l'ordre
  -> de gauche à droite, puis nouvelle ligne

  grid-auto-flow: row;    -> Remplit ligne par ligne (défaut)
  grid-auto-flow: column; -> Remplit colonne par colonne
  grid-auto-flow: dense;  -> Tente de remplir les trous

justify-self / align-self : Alignement d'un item spécifique
  .item-special {
    justify-self: center;
    align-self: end;
  }


# ────────────────────────────────────────────────────────────────────────────
# [IDEE] PATTERNS GRID COURANTS
# ────────────────────────────────────────────────────────────────────────────

LAYOUT DE PAGE CLASSIQUE :
  .page {
    display: grid;
    grid-template-columns: 260px 1fr;
    grid-template-rows: 70px 1fr 60px;
    grid-template-areas:
      "header header"
      "nav    main"
      "footer footer";
    min-height: 100vh;
    gap: 0;
  }
  header { grid-area: header; background: #2c3e50; }
  nav    { grid-area: nav; background: #34495e; }
  main   { grid-area: main; padding: 20px; }
  footer { grid-area: footer; background: #2c3e50; }

GALERIE RESPONSIVE :
  .galerie {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
  }
  .galerie img {
    width: 100%;
    height: 200px;
    object-fit: cover;       /* Recadrage intelligent */
    border-radius: 8px;
  }

GRILLE MAGAZINE AVEC ARTICLE EN VEDETTE :
  .grille-articles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 400px 300px;
    gap: 15px;
  }
  .article-vedette {
    grid-column: 1 / span 2;  /* Prend 2 colonnes */
    grid-row: 1 / span 2;     /* Prend 2 lignes */
  }

CENTRER AVEC GRID :
  .wrapper {
    display: grid;
    place-items: center;
    min-height: 100vh;
  }

COLONNES ÉGALES SANS FLEX/GRID :
  .cartes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }


# ============================================================================
# [GUIDE] CHAPITRE 11 : POSITIONNEMENT
# ============================================================================

[OBJECTIF] OBJECTIFS D'APPRENTISSAGE
  [OK] Comprendre les 5 valeurs de position
  [OK] Utiliser top, right, bottom, left
  [OK] Comprendre z-index et empilement
  [OK] Créer des mises en page avec position


# ────────────────────────────────────────────────────────────────────────────
# [IMPORTANT] PROPERTY POSITION
# ────────────────────────────────────────────────────────────────────────────

La propriété position contrôle le POSITIONNEMENT d'un élément.
Utilisée avec : top, right, bottom, left, z-index

1. position: static (DÉFAUT)
   -> Flux normal du document
   -> top, right, bottom, left, z-index IGNORÉS
   -> Pas besoin de le déclarer explicitement

2. position: relative
   -> Reste DANS le flux normal
   -> Se déplace PAR RAPPORT À SA POSITION INITIALE
   -> L'espace original est CONSERVÉ (les autres éléments ne bougent pas)

   .decale {
     position: relative;
     top: 20px;     -> Descend de 20px depuis sa position normale
     left: 30px;    -> Se décale de 30px vers la droite
   }

   UTILISATION COURANTE :
   -> Créer un contexte de positionnement pour les enfants absolus
   -> Légers ajustements visuels

3. position: absolute
   -> SORT DU FLUX NORMAL (l'espace est libéré!)
   -> Se positionne par rapport à son ANCÊTRE POSITIONNÉ LE PLUS PROCHE
   -> Si pas d'ancêtre positionné : par rapport à <html>

   PATTERN CLASSIQUE :
   .parent {
     position: relative;  <- Crée le contexte
   }
   .enfant-absolu {
     position: absolute;
     top: 10px;
     right: 10px;         <- 10px du coin supérieur droit du parent
   }

   EXEMPLES D'UTILISATION :
   -> Badges sur des cartes
   -> Tooltips
   -> Icônes superposées
   -> Bouton de fermeture dans une modale

4. position: fixed
   -> SORT DU FLUX NORMAL
   -> Se positionne par rapport à la FENÊTRE DU NAVIGATEUR
   -> Reste FIXE même lors du défilement !

   .navbar-fixe {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;      <- Obligatoire si full-width
     z-index: 1000;    <- Au-dessus du contenu
   }

   .bouton-retour-haut {
     position: fixed;
     bottom: 30px;
     right: 30px;
   }

   .cookie-banner {
     position: fixed;
     bottom: 0;
     left: 0;
     width: 100%;
   }

5. position: sticky
   -> SE COMPORTE COMME relative JUSQU'À un seuil de défilement
   -> Puis DEVIENT fixed jusqu'à la fin de son parent
   -> Très utile pour les en-têtes de sections

   .entete-sticky {
     position: sticky;
     top: 0;           <- Colle en haut quand on défile jusqu'à lui
     background: white;
     z-index: 100;
   }

   thead tr {
     position: sticky;
     top: 0;           <- En-tête de tableau qui reste visible
   }


# ────────────────────────────────────────────────────────────────────────────
# [PACKAGE] Z-INDEX (EMPILEMENT)
# ────────────────────────────────────────────────────────────────────────────

z-index contrôle l'ORDER D'EMPILEMENT des éléments.

RÈGLES :
  -> Plus le z-index est GRAND, plus l'élément est AU-DESSUS
  -> z-index fonctionne SEULEMENT sur les éléments positionnés
    (position: relative/absolute/fixed/sticky)
  -> Valeur par défaut : auto (équivalent à 0)
  -> Peut être négatif

  .fond    { z-index: 0; }      <- En dessous
  .contenu { z-index: 1; }      <- Au-dessus du fond
  .modale  { z-index: 100; }    <- Au-dessus du contenu
  .toast   { z-index: 200; }    <- Au-dessus de tout

EMPILEMENT TYPIQUE :
  -> Fond : 0
  -> Contenu : 1
  -> Navigation fixe : 100
  -> Dropdown menus : 200
  -> Overlays : 300
  -> Modales : 400
  -> Tooltips : 500
  -> Loading spinners : 600


# ────────────────────────────────────────────────────────────────────────────
# ^v PROPRIÉTÉS top, right, bottom, left
# ────────────────────────────────────────────────────────────────────────────

Ces propriétés définissent la DISTANCE depuis un bord.

  .element {
    position: absolute;
    top: 20px;    -> 20px depuis le bord supérieur du parent
    right: 0;     -> Collé au bord droit
    bottom: auto; -> Ignoré (auto = pas de contrainte)
    left: 30px;   -> 30px depuis le bord gauche
  }

CENTRER AVEC POSITION ABSOLUTE :
  .centrage-absolu {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  /* Ajuster pour la taille propre */
  }

REMPLIR LE PARENT COMPLÈTEMENT :
  .overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* Ou équivalent : */
    inset: 0;    /* Propriété moderne */
  }


# ────────────────────────────────────────────────────────────────────────────
# [IDEE] PATTERNS DE POSITIONNEMENT COURANTS
# ────────────────────────────────────────────────────────────────────────────

BADGE SUR UNE CARTE :
  .carte { position: relative; }
  .badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: red;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
  }

NAVIGATION FIXE AVEC OFFSET DU CONTENU :
  nav {
    position: fixed;
    top: 0;
    width: 100%;
    height: 70px;
    z-index: 100;
  }
  body { padding-top: 70px; } /* Compenser la nav fixe */

IMAGE AVEC LÉGENDE SUPERPOSÉE :
  .card-image {
    position: relative;
    overflow: hidden;
  }
  .card-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }
  .card-image .caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: white;
    padding: 15px;
  }

DROPDOWN MENU :
  .nav-item { position: relative; }
  .dropdown {
    position: absolute;
    top: 100%;          /* Juste sous l'élément parent */
    left: 0;
    background: white;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    border-radius: 8px;
    display: none;
    z-index: 200;
  }
  .nav-item:hover .dropdown { display: block; }

TOOLTIP :
  .tooltip-container { position: relative; }
  .tooltip {
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
  }
  .tooltip-container:hover .tooltip { opacity: 1; }


# ============================================================================
# [GUIDE] CHAPITRE 12 : RESPONSIVE DESIGN & MEDIA QUERIES
# ============================================================================

[OBJECTIF] OBJECTIFS D'APPRENTISSAGE
  [OK] Comprendre le Responsive Design
  [OK] Maîtriser les Media Queries
  [OK] Approche Mobile-First
  [OK] Créer des mises en page adaptatives


# ────────────────────────────────────────────────────────────────────────────
# [MOBILE] QU'EST-CE QUE LE RESPONSIVE DESIGN ?
# ────────────────────────────────────────────────────────────────────────────

Responsive Design = Un seul code HTML/CSS qui s'adapte
                    à TOUTES les tailles d'écrans.

POURQUOI C'EST CRUCIAL :
  -> 55%+ du trafic web mondial vient du mobile
  -> Google pénalise les sites non-responsive
  -> Expérience utilisateur

LES 3 PILIERS DU RESPONSIVE :
  1. Grille fluide (%, fr, auto-fit/fill)
  2. Images flexibles (max-width: 100%)
  3. Media Queries (CSS conditionnel)

MÉTA VIEWPORT (rappel) :
  -> OBLIGATOIRE dans le <head> !
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  -> Sans ça, le mobile affiche la version desktop zoomée


# ────────────────────────────────────────────────────────────────────────────
# [MESURE] MEDIA QUERIES
# ────────────────────────────────────────────────────────────────────────────

Syntaxe :
  @media type and (condition) {
    /* CSS appliqué si condition vraie */
  }

Types de médias :
  screen  -> Écrans (défaut, le plus utilisé)
  print   -> Impression
  all     -> Tous les types (défaut si omis)
  speech  -> Lecteurs d'écran

Conditions courantes :
  min-width: 768px    -> Largeur ≥ 768px
  max-width: 768px    -> Largeur ≤ 768px
  min-height: 600px   -> Hauteur ≥ 600px
  orientation: landscape -> Mode paysage
  orientation: portrait  -> Mode portrait
  (prefers-color-scheme: dark)  -> Mode sombre
  (prefers-reduced-motion: reduce) -> Moins d'animations

BREAKPOINTS COURANTS :
  xs  -> < 576px    -> Très petit mobile
  sm  -> 576px      -> Mobile standard
  md  -> 768px      -> Tablette portrait
  lg  -> 992px      -> Tablette paysage / petit bureau
  xl  -> 1200px     -> Grand bureau
  xxl -> 1400px     -> Très grand écran

EXEMPLES DE MEDIA QUERIES :

  /* Tablettes et plus */
  @media screen and (min-width: 768px) {
    .colonne { width: 50%; }
  }

  /* Desktops */
  @media screen and (min-width: 1024px) {
    .colonne { width: 33.333%; }
  }

  /* Mobiles seulement */
  @media screen and (max-width: 767px) {
    .menu { display: none; }
    .menu-hamburger { display: block; }
  }

  /* Plage spécifique */
  @media (min-width: 768px) and (max-width: 1023px) {
    /* Seulement les tablettes */
  }

  /* Mode sombre */
  @media (prefers-color-scheme: dark) {
    body { background: #1a1a1a; color: #f0f0f0; }
  }

  /* Impression */
  @media print {
    .navbar, .sidebar, footer { display: none; }
    body { font-size: 12pt; color: black; }
    a { text-decoration: underline; }
    a::after { content: " (" attr(href) ")"; }
  }


# ────────────────────────────────────────────────────────────────────────────
# [MOBILE] MOBILE FIRST VS DESKTOP FIRST
# ────────────────────────────────────────────────────────────────────────────

DESKTOP FIRST (classique) :
  -> Coder pour desktop, puis réduire pour mobile
  -> Utilise max-width dans les media queries

  /* Style bureau par défaut */
  .grille { grid-template-columns: repeat(3, 1fr); }

  /* Surcharger pour tablette */
  @media (max-width: 768px) {
    .grille { grid-template-columns: repeat(2, 1fr); }
  }

  /* Surcharger pour mobile */
  @media (max-width: 480px) {
    .grille { grid-template-columns: 1fr; }
  }

MOBILE FIRST (RECOMMANDÉE [OK]) :
  -> Coder pour mobile, puis améliorer pour les grands écrans
  -> Utilise min-width dans les media queries

  /* Style mobile par défaut */
  .grille { grid-template-columns: 1fr; }

  /* Améliorer pour tablette */
  @media (min-width: 576px) {
    .grille { grid-template-columns: repeat(2, 1fr); }
  }

  /* Améliorer pour desktop */
  @media (min-width: 1024px) {
    .grille { grid-template-columns: repeat(3, 1fr); }
  }

POURQUOI MOBILE FIRST EST MEILLEUR :
  [OK] Performance : Le CSS de base est minimal (mobile)
  [OK] Force à prioriser le contenu important
  [OK] Plus simple à faire évoluer
  [OK] Google indexe en mobile-first


# ────────────────────────────────────────────────────────────────────────────
# [OUTIL] TECHNIQUES RESPONSIVE PRATIQUES
# ────────────────────────────────────────────────────────────────────────────

IMAGES RESPONSIVE :
  img {
    max-width: 100%;      /* Ne jamais dépasser le parent */
    height: auto;         /* Garder les proportions */
    display: block;       /* Éviter l'espace sous l'image */
  }

  /* Ou modern : */
  img {
    max-width: 100%;
    object-fit: cover;    /* cover / contain / fill / none */
  }

  /* Image srcset pour différentes résolutions */
  <img
    src="photo-800.jpg"
    srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
    sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
    alt="Photo responsive"
  >

TYPOGRAPHIE RESPONSIVE :
  /* Option 1 : clamp (min, préféré, max) */
  h1 {
    font-size: clamp(1.5rem, 5vw, 3rem);
    /* Min 1.5rem, idéalement 5% de la largeur, max 3rem */
  }

  /* Option 2 : Media queries */
  h1 { font-size: 1.5rem; }
  @media (min-width: 768px) { h1 { font-size: 2rem; } }
  @media (min-width: 1200px) { h1 { font-size: 3rem; } }

CONTENEUR RESPONSIVE :
  .container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;      /* Padding sur les côtés pour mobiles */
  }

  @media (min-width: 768px) {
    .container { padding: 0 2rem; }
  }

FLEXBOX RESPONSIVE :
  .cartes {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }

  .carte {
    flex: 1 1 300px;  /* Minimum 300px, grandit */
  }
  /* Auto-responsive sans media query ! */

GRID RESPONSIVE :
  .grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
  }
  /* Auto-responsive sans media query ! */

NAVIGATION MOBILE :
  /* Mobile : hamburger */
  .nav-liens { display: none; }
  .hamburger { display: block; }

  /* Desktop : navigation normale */
  @media (min-width: 768px) {
    .nav-liens { display: flex; }
    .hamburger { display: none; }
  }


# ────────────────────────────────────────────────────────────────────────────
# [OUTILS] DEBUGGING RESPONSIVE
# ────────────────────────────────────────────────────────────────────────────

DEVTOOLS (F12) -> Responsive Mode :
  -> Chrome : Ctrl+Shift+M ou cliquer icône mobile
  -> Tester différentes tailles d'écrans
  -> Rotation portrait/paysage
  -> Simuler différents appareils

EXTENSION CSS UTILE POUR DEBUGGING :
  /* Temporaire pour voir les blocs */
  * { outline: 1px solid red; }


# ============================================================================
# [COURS] EXERCICE PRATIQUE - FIN PARTIE 3
# ============================================================================

CAHIER DES CHARGES : Créer un site "Portfolio Responsive" complet

STRUCTURE DE FICHIERS :
  portfolio/
  ├── index.html
  ├── style.css
  └── images/ (utiliser des images placeholder)

SECTIONS À CRÉER :

1. NAVIGATION FIXE :
   - Logo à gauche
   - Liens à droite
   - Navigation qui disparaît sur mobile
   - Hamburger visible seulement sur mobile (visuellement)
   - Sticky avec fond blanc + ombre au scroll

2. SECTION HÉRO (100vh) :
   - Fond dégradé (Flexbox centrer le contenu)
   - Titre h1 animé (font-size responsive avec clamp)
   - Sous-titre
   - 2 boutons côte à côte

3. SECTION "À PROPOS" (2 colonnes) :
   - Desktop : texte à gauche, image à droite (Grid)
   - Mobile : empilé verticalement

4. SECTION "PROJETS" (galerie) :
   - Grid responsive : auto-fit, minmax(280px, 1fr)
   - 6 cartes projet avec image, titre, description, bouton
   - Effet hover sur les cartes

5. SECTION "COMPÉTENCES" :
   - Grille de barres de progression
   - Flex pour aligner nom + barre
   - Barre avec largeur en %

6. FOOTER :
   - 3 colonnes sur desktop, 1 sur mobile
   - Liens de navigation
   - Crédits

CSS OBLIGATOIRE :
  [OK] Variables CSS (:root)
  [OK] box-sizing: border-box
  [OK] Flexbox pour la navigation et le héros
  [OK] CSS Grid pour les projets et la section about
  [OK] Position: fixed pour la navigation
  [OK] Position: absolute pour un badge ou overlay
  [OK] Media queries (mobile first, 3 breakpoints minimum)
  [OK] Transitions sur les hovers
  [OK] clamp() pour la typographie responsive


# ────────────────────────────────────────────────────────────────────────────
# [OK] CORRIGÉ DE L'EXERCICE PARTIE 3
# ────────────────────────────────────────────────────────────────────────────

FICHIER : index.html
════════════════════

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio - Alex Martin</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <!-- NAVIGATION -->
    <nav class="navbar" id="navbar">
        <div class="nav-container">
            <a href="#" class="logo">Alex.dev</a>
            <ul class="nav-liens">
                <li><a href="#about">À propos</a></li>
                <li><a href="#projets">Projets</a></li>
                <li><a href="#competences">Compétences</a></li>
                <li><a href="#contact" class="btn-nav">Contact</a></li>
            </ul>
            <div class="hamburger" id="hamburger">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </nav>

    <!-- HÉRO -->
    <section class="hero" id="home">
        <div class="hero-contenu">
            <p class="hero-tag">[WAVING_HAND_SIGN] Bonjour, je suis</p>
            <h1>Alex Martin</h1>
            <h2>Développeur Full-Stack</h2>
            <p class="hero-description">
                Je crée des applications web modernes et performantes.
                Passionné par le code propre et l'expérience utilisateur.
            </p>
            <div class="hero-boutons">
                <a href="#projets" class="btn btn-primaire">Voir mes projets</a>
                <a href="#contact" class="btn btn-outline">Me contacter</a>
            </div>
        </div>
    </section>

    <!-- À PROPOS -->
    <section class="about" id="about">
        <div class="container">
            <h2 class="section-titre">À propos de moi</h2>
            <div class="about-grille">
                <div class="about-texte">
                    <h3>Qui suis-je ?</h3>
                    <p>
                        Développeur full-stack avec <strong>3 ans d'expérience</strong>,
                        je me spécialise dans la création d'applications web modernes
                        avec des technologies comme React, Node.js et PostgreSQL.
                    </p>
                    <p>
                        Mon approche : code <em>propre</em>, performance optimale
                        et expérience utilisateur irréprochable.
                    </p>
                    <ul class="about-liste">
                        <li>[IMPORTANT] Paris, France</li>
                        <li>[COURS] Diplôme Ingénieur Informatique</li>
                        <li>[PRO] 3 ans d'expérience professionnelle</li>
                        <li>[MONDE] Disponible pour des missions remote</li>
                    </ul>
                    <a href="#" class="btn btn-primaire" download>
                        Télécharger mon CV
                    </a>
                </div>
                <div class="about-image">
                    <div class="image-wrapper">
                        <img
                            src="https://i.pravatar.cc/400?img=52"
                            alt="Photo de profil d'Alex Martin"
                        >
                        <div class="badge-experience">
                            <span class="nb">3+</span>
                            <span class="label">ans d'exp.</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- PROJETS -->
    <section class="projets" id="projets">
        <div class="container">
            <h2 class="section-titre">Mes Projets</h2>
            <p class="section-sous-titre">Quelques réalisations récentes</p>
            <div class="projets-grille">

                <article class="carte-projet">
                    <div class="carte-image">
                        <img src="https://picsum.photos/400/250?random=1" alt="Projet 1">
                        <div class="carte-overlay">
                            <a href="#" class="btn-overlay">Voir le projet</a>
                        </div>
                    </div>
                    <div class="carte-corps">
                        <span class="carte-categorie">Web App</span>
                        <h3>E-Commerce Platform</h3>
                        <p>Application de commerce en ligne avec panier, paiement et gestion des commandes.</p>
                        <div class="carte-tags">
                            <span>React</span>
                            <span>Node.js</span>
                            <span>Stripe</span>
                        </div>
                    </div>
                </article>

                <article class="carte-projet">
                    <div class="carte-image">
                        <img src="https://picsum.photos/400/250?random=2" alt="Projet 2">
                        <div class="carte-overlay">
                            <a href="#" class="btn-overlay">Voir le projet</a>
                        </div>
                    </div>
                    <div class="carte-corps">
                        <span class="carte-categorie">Dashboard</span>
                        <h3>Analytics Dashboard</h3>
                        <p>Tableau de bord analytique avec graphiques en temps réel et exports.</p>
                        <div class="carte-tags">
                            <span>Vue.js</span>
                            <span>D3.js</span>
                            <span>Python</span>
                        </div>
                    </div>
                </article>

                <article class="carte-projet">
                    <div class="carte-image">
                        <img src="https://picsum.photos/400/250?random=3" alt="Projet 3">
                        <div class="carte-overlay">
                            <a href="#" class="btn-overlay">Voir le projet</a>
                        </div>
                    </div>
                    <div class="carte-corps">
                        <span class="carte-categorie">API REST</span>
                        <h3>Task Manager API</h3>
                        <p>API RESTful complète avec authentification JWT et documentation Swagger.</p>
                        <div class="carte-tags">
                            <span>Flask</span>
                            <span>PostgreSQL</span>
                            <span>Docker</span>
                        </div>
                    </div>
                </article>

                <article class="carte-projet">
                    <div class="carte-image">
                        <img src="https://picsum.photos/400/250?random=4" alt="Projet 4">
                        <div class="carte-overlay">
                            <a href="#" class="btn-overlay">Voir le projet</a>
                        </div>
                    </div>
                    <div class="carte-corps">
                        <span class="carte-categorie">Mobile</span>
                        <h3>Fitness App</h3>
                        <p>Application de suivi fitness avec plans d'entraînement personnalisés.</p>
                        <div class="carte-tags">
                            <span>React Native</span>
                            <span>Firebase</span>
                        </div>
                    </div>
                </article>

            </div>
        </div>
    </section>

    <!-- COMPÉTENCES -->
    <section class="competences" id="competences">
        <div class="container">
            <h2 class="section-titre">Mes Compétences</h2>
            <div class="comp-grille">
                <div class="comp-colonne">
                    <h3>Frontend</h3>
                    <div class="barre-skill">
                        <div class="skill-info"><span>HTML/CSS</span><span>95%</span></div>
                        <div class="barre-fond"><div class="barre-remplissage" style="width: 95%"></div></div>
                    </div>
                    <div class="barre-skill">
                        <div class="skill-info"><span>JavaScript</span><span>90%</span></div>
                        <div class="barre-fond"><div class="barre-remplissage" style="width: 90%"></div></div>
                    </div>
                    <div class="barre-skill">
                        <div class="skill-info"><span>React</span><span>85%</span></div>
                        <div class="barre-fond"><div class="barre-remplissage" style="width: 85%"></div></div>
                    </div>
                </div>
                <div class="comp-colonne">
                    <h3>Backend</h3>
                    <div class="barre-skill">
                        <div class="skill-info"><span>Python</span><span>88%</span></div>
                        <div class="barre-fond"><div class="barre-remplissage" style="width: 88%"></div></div>
                    </div>
                    <div class="barre-skill">
                        <div class="skill-info"><span>Node.js</span><span>80%</span></div>
                        <div class="barre-fond"><div class="barre-remplissage" style="width: 80%"></div></div>
                    </div>
                    <div class="barre-skill">
                        <div class="skill-info"><span>PostgreSQL</span><span>75%</span></div>
                        <div class="barre-fond"><div class="barre-remplissage" style="width: 75%"></div></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- FOOTER -->
    <footer id="contact">
        <div class="container footer-grille">
            <div class="footer-col">
                <h3>Alex.dev</h3>
                <p>Développeur Full-Stack passionné, basé à Paris.</p>
            </div>
            <div class="footer-col">
                <h4>Navigation</h4>
                <ul>
                    <li><a href="#home">Accueil</a></li>
                    <li><a href="#about">À propos</a></li>
                    <li><a href="#projets">Projets</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h4>Contact</h4>
                <p><a href="mailto:alex@martin.dev">alex@martin.dev</a></p>
                <div class="footer-reseaux">
                    <a href="#">GitHub</a>
                    <a href="#">LinkedIn</a>
                    <a href="#">Twitter</a>
                </div>
            </div>
        </div>
        <div class="footer-bas">
            <p>© 2024 Alex Martin — Fait avec [HEAVY_BLACK_HEART] et CSS Grid</p>
        </div>
    </footer>

</body>
</html>


FICHIER : style.css
════════════════════

/* ===========================
   VARIABLES ET RESET
=========================== */
:root {
    --primaire: #6366f1;
    --primaire-fonce: #4f46e5;
    --secondaire: #ec4899;
    --texte: #1f2937;
    --texte-clair: #6b7280;
    --fond: #f9fafb;
    --fond-sombre: #111827;
    --blanc: #ffffff;
    --bordure: #e5e7eb;
    --ombre-sm: 0 1px 3px rgba(0,0,0,0.1);
    --ombre-md: 0 4px 15px rgba(0,0,0,0.1);
    --ombre-lg: 0 20px 40px rgba(0,0,0,0.15);
    --transition: 0.3s ease;
    --rayon: 12px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', sans-serif;
    color: var(--texte);
    background: var(--fond);
    line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }
a   { text-decoration: none; color: inherit; }
ul  { list-style: none; }

/* ===========================
   COMPOSANTS COMMUNS
=========================== */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.btn {
    display: inline-block;
    padding: 0.75rem 1.75rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all var(--transition);
    cursor: pointer;
}
.btn-primaire {
    background: var(--primaire);
    color: white;
    box-shadow: 0 4px 15px rgba(99,102,241,0.3);
}
.btn-primaire:hover {
    background: var(--primaire-fonce);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99,102,241,0.4);
}
.btn-outline {
    border: 2px solid rgba(255,255,255,0.6);
    color: white;
}
.btn-outline:hover {
    background: rgba(255,255,255,0.15);
    border-color: white;
}

.section-titre {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.5rem;
}
.section-sous-titre {
    text-align: center;
    color: var(--texte-clair);
    margin-bottom: 3rem;
}

section { padding: 5rem 0; }

/* ===========================
   NAVIGATION
=========================== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--bordure);
    transition: box-shadow var(--transition);
}
.navbar.scrolled { box-shadow: var(--ombre-md); }

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    max-width: 1200px;
    margin: 0 auto;
}

.logo {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primaire);
}

.nav-liens {
    display: none;        /* Caché mobile */
    gap: 0.5rem;
    align-items: center;
}
.nav-liens a {
    color: var(--texte-clair);
    padding: 0.5rem 0.75rem;
    font-weight: 500;
    border-radius: 6px;
    transition: color var(--transition);
}
.nav-liens a:hover { color: var(--primaire); }
.btn-nav {
    background: var(--primaire);
    color: white !important;
    padding: 0.5rem 1.25rem !important;
}
.btn-nav:hover { background: var(--primaire-fonce); }

.hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 5px;
}
.hamburger span {
    width: 25px;
    height: 2px;
    background: var(--texte);
    transition: var(--transition);
    border-radius: 2px;
}

/* ===========================
   HÉRO
=========================== */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 7rem 1.25rem 5rem;
    text-align: center;
}
.hero-contenu { max-width: 700px; margin: 0 auto; }
.hero-tag {
    font-size: 1rem;
    color: rgba(255,255,255,0.8);
    margin-bottom: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.hero h1 {
    font-size: clamp(2.5rem, 8vw, 5rem);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 0.5rem;
}
.hero h2 {
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    font-weight: 300;
    color: rgba(255,255,255,0.85);
    margin-bottom: 1.5rem;
}
.hero-description {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.75);
    max-width: 500px;
    margin: 0 auto 2.5rem;
}
.hero-boutons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ===========================
   À PROPOS
=========================== */
.about { background: white; }

.about-grille {
    display: grid;
    grid-template-columns: 1fr;   /* Mobile: 1 colonne */
    gap: 3rem;
    align-items: center;
}

.about-texte h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--primaire);
}
.about-texte p { color: var(--texte-clair); margin-bottom: 1rem; }
.about-liste { margin: 1.5rem 0; }
.about-liste li { padding: 0.4rem 0; color: var(--texte-clair); }

.image-wrapper {
    position: relative;
    display: inline-block;
    margin: 0 auto;
}
.image-wrapper img {
    width: 300px;
    height: 300px;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    object-fit: cover;
    box-shadow: var(--ombre-lg);
}
.badge-experience {
    position: absolute;
    bottom: 20px;
    right: -20px;
    background: var(--primaire);
    color: white;
    border-radius: 12px;
    padding: 10px 15px;
    text-align: center;
    box-shadow: var(--ombre-md);
}
.badge-experience .nb {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
}
.badge-experience .label { font-size: 0.75rem; }

/* ===========================
   PROJETS
=========================== */
.projets-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.carte-projet {
    background: white;
    border-radius: var(--rayon);
    overflow: hidden;
    box-shadow: var(--ombre-sm);
    transition: transform var(--transition), box-shadow var(--transition);
    display: flex;
    flex-direction: column;
}
.carte-projet:hover {
    transform: translateY(-8px);
    box-shadow: var(--ombre-lg);
}

.carte-image { position: relative; overflow: hidden; }
.carte-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform var(--transition);
}
.carte-projet:hover .carte-image img { transform: scale(1.05); }

.carte-overlay {
    position: absolute;
    inset: 0;
    background: rgba(99, 102, 241, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition);
}
.carte-projet:hover .carte-overlay { opacity: 1; }
.btn-overlay {
    background: white;
    color: var(--primaire);
    padding: 0.6rem 1.5rem;
    border-radius: 6px;
    font-weight: 600;
}

.carte-corps { padding: 1.25rem; flex: 1; }
.carte-categorie {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primaire);
    font-weight: 600;
}
.carte-corps h3 { font-size: 1.1rem; margin: 0.5rem 0; }
.carte-corps p { color: var(--texte-clair); font-size: 0.9rem; margin-bottom: 1rem; }

.carte-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.carte-tags span {
    background: #eef2ff;
    color: var(--primaire);
    font-size: 0.75rem;
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 500;
}

/* ===========================
   COMPÉTENCES
=========================== */
.competences { background: white; }

.comp-grille {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}
.comp-colonne h3 {
    font-size: 1.2rem;
    color: var(--primaire);
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--primaire);
    display: inline-block;
}
.barre-skill { margin-bottom: 1.2rem; }
.skill-info { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 0.9rem; font-weight: 500; }
.barre-fond { background: #e5e7eb; border-radius: 10px; height: 8px; overflow: hidden; }
.barre-remplissage {
    height: 100%;
    background: linear-gradient(to right, var(--primaire), var(--secondaire));
    border-radius: 10px;
    transition: width 1s ease;
}

/* ===========================
   FOOTER
=========================== */
footer {
    background: var(--fond-sombre);
    color: rgba(255,255,255,0.7);
    padding: 4rem 0 0;
}
.footer-grille {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-bottom: 3rem;
}
.footer-col h3 { color: var(--primaire); font-size: 1.3rem; margin-bottom: 0.75rem; }
.footer-col h4 { color: white; margin-bottom: 0.75rem; }
.footer-col p   { font-size: 0.9rem; line-height: 1.8; }
.footer-col ul  { display: flex; flex-direction: column; gap: 0.4rem; }
.footer-col a   { color: rgba(255,255,255,0.6); transition: color var(--transition); }
.footer-col a:hover { color: var(--primaire); }

.footer-reseaux { display: flex; gap: 12px; margin-top: 1rem; }
.footer-reseaux a {
    background: rgba(255,255,255,0.1);
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.85rem;
    transition: background var(--transition);
}
.footer-reseaux a:hover { background: var(--primaire); color: white; }

.footer-bas {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 1.5rem 0;
    text-align: center;
    font-size: 0.85rem;
}

/* ===========================
   MEDIA QUERIES (MOBILE FIRST)
=========================== */

/* Tablettes : 576px+ */
@media (min-width: 576px) {
    .nav-liens { display: flex; }
    .hamburger { display: none; }

    .comp-grille { grid-template-columns: repeat(2, 1fr); }
    .footer-grille { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop : 1024px+ */
@media (min-width: 1024px) {
    .about-grille { grid-template-columns: 1fr 1fr; }
    .footer-grille { grid-template-columns: 2fr 1fr 1fr; }
    .nav-container { padding: 1rem 2rem; }
    .hero { text-align: left; }
    .hero-contenu { margin: 0; }
    .hero-boutons { justify-content: flex-start; }
    .hero-description { margin-left: 0; }
}

/* Mode sombre */
@media (prefers-color-scheme: dark) {
    :root {
        --texte: #f9fafb;
        --texte-clair: #9ca3af;
        --fond: #111827;
        --bordure: #374151;
    }
    .navbar { background: rgba(17,24,39,0.95); }
    .about, .carte-projet, .competences { background: #1f2937; }
}


# ============================================================================
# [DOCS] RÉCAPITULATIF PARTIE 3
# ============================================================================

CE QUE VOUS AVEZ APPRIS :

[OK] Flexbox : Conteneur (flex-direction, justify-content, align-items, gap)
[OK] Flexbox : Items (flex-grow, flex-shrink, flex-basis, flex, order, align-self)
[OK] Patterns Flexbox : centrage, navigation, cartes égales
[OK] CSS Grid : Colonnes et lignes (grid-template-columns/rows)
[OK] CSS Grid : L'unité fr, repeat(), minmax(), auto-fit, auto-fill
[OK] CSS Grid : grid-template-areas pour layouts lisibles
[OK] CSS Grid : Placement des items (grid-column, grid-row, span)
[OK] Position : static, relative, absolute, fixed, sticky
[OK] z-index et empilement
[OK] Patterns de positionnement : badges, overlays, dropdowns
[OK] Responsive Design : les 3 piliers
[OK] Media Queries : syntaxe et breakpoints
[OK] Mobile First vs Desktop First
[OK] Techniques responsive : clamp(), auto-fit, srcset

-> PROCHAINE ÉTAPE : html_css_partie4.txt
   Formulaires HTML, sémantique, accessibilité et SEO !

